Используйте массив в AJAX jQuery

Question

Используйте массив в jQuery AJAX-функции из json-encode();

Привет, Я новичок в AJAX

У меня есть ип страницы, где я хочу, чтобы вызвать AJAX запрос, чтобы добавить что-то на этой странице. 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> 

Вот моя Аякса функция

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); 

я не получил, как я могу вернуть массив из моего файла requestColumns.php к моему запросу jquery Ajax и после использования его для изменения DOM моей страницы export.php. Спасибо за помощь.

Answer 1

Maby это поможет? jQuery JSON

Это будет что-то вроде этого:

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

Answer 2

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 в цикл это то, что не хватало.

Answer 3

Вы можете изменить мой код, исходя из ваших потребностей. Но общие идеи таковы:

//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(); 
      } 

     });  

    } 

Answer 4

Спасибо всем за вас anwser. Это помогло мне сделать так. Вот мой код:

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!'); 
      } 
     }); 
}