在AJAX jquery中使用数组

Use an array in an AJAX jquery function from json-encode();

Hi, I'm new to AJAX

I have un page where i want to call an ajax request to add something on this page. export.php

<div class="row">
    <div class="span12">
        <select id="listTable" name="listTable">
            <option value="appel">Appels</option>
            <option value="dossier">Dossiers</option>
            <option value="commande">Commandes Fournisseur</option>
         </select>
    </div>
</div>

<div class="row">
    <div class="span12">
         <button class="btn btn-primary" onClick="selectTable()">Select</button>
    </div>
</div>

<div id ="columns" class="row" style="display:none;">
    <div class="span12">
         <div id="columns-check" style="">
            <!-- Here will be displayed the content of the ajax request-->
         </div>
    </div>
</div>

<script type="text/javascript" src="_module/ExportFichier/exportFile/ajax/requestExport.js"></script>

Here's my ajax function

function selectTable(table){

    var table = $("#listTable").val();

        $.ajax({

            url: "_module/ExportFichier/exportFile/ajax/requestColumns.php",
            type: "POST",
            data: "table="+table,
            dataType: 'json',

            success: function(data){

                $('#columns').css('display','block');
                $('#columns-check').empty();

                for(i=0; i<data; i++){
                    $('#columns-check').prepend('<div>I would like to display here the content of my array</div>');
                }
            },

            error: function(){
                alert('The Ajax request did not works!');
            }


        });

}

requestColumns.php

header("content-type: application/json; charset=utf-8");

require_once '../requirements.php';

$tableName = $_POST["table"];

$objService = new ExportFileService($tableName);
$columns = $objService->get_columns();

echo json_encode($columns);

I didn't get the way I can return an array from my requestColumns.php file to my jquery Ajax request and after use it to modify the DOM of my page export.php. Thanks for your help.

douduan7295
douduan7295 PHP脚本(您的数组编码为JSON)的响应作为成功回调函数的第一个参数传递,您已将其称为数据,因此您需要迭代数据。你事后做的有点依赖;你还没有告诉我们JSON的样子,或者你想要用它做什么,我可以看到,所以很难比这更精确。
接近 6 年之前 回复
dsgdfh302506
dsgdfh302506 $columns它是一个数组。
接近 6 年之前 回复
drv13270
drv13270 $columns是数组还是对象?
接近 6 年之前 回复
dp7311
dp7311 你可以在这里找到如何循环一个对象[stackoverflow.com/questions/684672/...
接近 6 年之前 回复

4个回答

Maby this will help? jQuery JSON

It will become something like this:

for (var i in data.<YOUR_KEY>) {
     $('#columns-check').prepend('Line: ' + data.<YOUR_KEY>[i]);
}
function selectTable(table){

var table = $("#listTable").val();

    $.ajax({

        url: "_module/ExportFichier/exportFile/ajax/requestColumns.php",
        type: "POST",
        data: "table="+table,
        dataType: 'json',

        success: function(data){

            $('#columns').css('display','block');
            $('#columns-check').empty();

            for(i=0; i<data.length; i++){
                $('#columns-check').prepend('<div>' + data.arraykey + '</div>'); //change arraykey with your index name
            }
        },

        error: function(){
            alert('The Ajax request did not works!');
        }


    });
}

data.length in the for loop is the thing that was missing.

You can try change my code based on your needs. But the general ideas is this:

//Your php code

   //Retrieiving data from AJAX
   $selctValue = $_POST["table"];

    //Send data from php to javascript. Using JSON you can send what you want.
    $arrToJSON = array(
        "dataPHPtoJs"=>"yourData",
        "asYouWant"=>"<div class=\".class1\">soemting</div>"    
    );  
    echo json_encode(array($arrToJSON));


    //Your javascript function
    function selectTable(){



    //Data you want to send to php. As many as you want.....
    var dt={ 
              table:$("#listTable").val()
            };



    var request =$.ajax({//http://api.jquery.com/jQuery.ajax/
                            url: "_module/ExportFichier/exportFile/ajax/requestColumns.php",
                            type: "POST",
                            data: dt,
                            dataType: "json"
                        });     



        //Ajax Done catch JSON from PHP 
        request.done(function(dataset){

            //Retrieiving information from php using JSON. Note, you can create html objects here as you did, or if you want your project more dinamicaly you can send html code from php (as I do)

            for (var index in dataset){ 
                 dataPHPtoJsJS=dataset[index].dataPHPtoJs;
                 asManyasYouWantJS=dataset[index].asYouWant;

                 $('#columns-check').prepend('<div>asManyasYouWantJS</div>');

             }

             //JavaScript conditions. Here you can control the behaivior of your html object, based on your PHP response
             if(dataPHPtoJsJS test your condition){
                //Do what you want to do..... 
                $('#columns').css('display','block');
                $('#columns-check').empty();
             }

        });     

  }

Thanks everyone for you anwser. It helped me to did it that way. Here my code:

function selectAllColumns(){

    var table = $("#listTable").val();

        $.ajax({

            url: "_module/ExportFichier/exportFile/ajax/requestAllColumns.php",
            type: "POST",
            data: "table="+ table,
            dataType: 'json',

            success: function(data){
                console.log('The Ajax request WORKS!');

                $('#columns').css('display','block');
                $('#columns-check').empty();

                for (var key in data) {
                    if (data.hasOwnProperty(key)) {
                        var id = Math.random();
                        $('#columns-check').prepend('<div style="display: inline-block; margin: 20px 20px 20px 0;"><input type="checkbox" id="'+id+'" class="field" value="'+data[key]+'" style="display: inline-block; margin:0 5px -1px 0;"><label for="'+id+'" class="field" style="display: inline-block;">'+data[key]+'</label></div>');
                    }
                }
            },

            error: function(){
                console.log('The Ajax request did not works!');
            }
        });
}
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐