Невозможно отобразить данные в DIV из MySQL

Question

Я не могу отобразить данные из набора DIV из базы данных MySQL. данные показывает только в последней DIV, ниже мой код:

$(document).ready(function(){ 
var n = 9; 

for(var i=0;i<n;i++){ 
    var div = document.createElement('div'); 

    div.className = "d5"; 
    div.id=i+1; 


    document.getElementById('container').appendChild(div); 

    $.ajax({          
     url: 'myapi.php',     //the script to call to get data   
     data: "",      //you can insert url argumnets here to pass to api.php for example "id=5&parent=6" 
     dataType: 'json',    //data format  
     success: function(data)   //on recieve of reply 
     { 
     var Name = data[2];    //get id 
     //var vname = data[1];   //get name 

     $('#'+div.id).html(""+Name);  

     } 
    }); 


} 
    }); 

Answer 1

Вы можете закрыть вызов Ajax в анонимной функции:

(function(div.id){ 
    $.ajax({          
     url: 'myapi.php',       
     data: "",       
     dataType: 'json',     
     success: function(data)   
     { 
     var Name = data[2];    
     //var vname = data[1];   

     $('#'+div.id).html(""+Name);  

     } 
    }); 
})(div.id); 

Поскольку вызов Ajax является асинхронной, значение div.id изменился до вызова Ajax возвращает
Reference

Answer 2

Добавить еще одно свойство, когда вы делаете запрос Ajax, асинхр: ложное. Надеюсь, что вы получите ваш результат

$.ajax({          
    url: 'myapi.php',     //the script to call to get data   
    data: "", 
    async:false ,     //you can insert url argumnets here to pass to api.php for example "id=5&parent=6" 
    dataType: 'json',    //data format  
    success: function(data)   //on recieve of reply 
    { 
    var Name = data[2];    //get id 
    //var vname = data[1];   //get name 

    $('#'+div.id).html(""+Name);  

    } 
}); 

Answer 3

набор Аякса async:false

$(document).ready(function(){ 
var n = 9; 

for(var i=0;i<n;i++){ 
    var div = document.createElement('div'); 

    div.className = "d5"; 
    div.id=i+1; 


    document.getElementById('container').appendChild(div); 

    $.ajax({ 
     async: false,         
     url: 'myapi.php',     //the script to call to get data   
     data: "",      //you can insert url argumnets here to pass to api.php for example "id=5&parent=6" 
     dataType: 'json',    //data format  
     success: function(data)   //on recieve of reply 
     { 
     var Name = data[2];    //get id 
     //var vname = data[1];   //get name 

     $('#'+div.id).html(""+Name);  

     } 
    }); 


} 
    }); 

Answer 4

Если myapi.php всегда возвращает те же данные, и вы хотите, чтобы отобразить его в нескольких дивы

$(document).ready(function() { 


    $.ajax({ 
     url: 'myapi.php', //the script to call to get data   
     data: "", //you can insert url argumnets here to pass to api.php for example "id=5&parent=6" 
     dataType: 'json', //data format  
     success: function(data) //on recieve of reply 
      { 
       var n = 9; 

       for (var i = 0; i < n; i++) { 
        var div = document.createElement('div'); 

        div.className = "d5"; 
        div.id = i + 1; 


        document.getElementById('container').appendChild(div); 

        var Name = data[2]; //get id 
        //var vname = data[1];   //get name 

        $('#' + div.id).html("" + Name); 
       } 

      } 
    }); 



}); 

If myapi.php возвращается разные данные для каждого запроса могут иметь несколько решений

Один из них просто установив атрибут асинхронной ложному

Другой проходящей идентификатор DIV на сервер и возвращает его с ответом

$(document).ready(function() { 
    var n = 9; 

    for (var i = 0; i < n; i++) { 
     var div = document.createElement('div'); 

     div.className = "d5"; 
     div.id = i + 1; 


     document.getElementById('container').appendChild(div); 

     $.ajax({ 
      url: 'myapi.php?id=' + div.id, //the script to call to get data   
      data: "", //you can insert url argumnets here to pass to api.php for example "id=5&parent=6" 
      dataType: 'json', //data format  
      success: function(data) //on recieve of reply 
       { 
        var Name = data[2]; //get id 
        //var vname = data[1];   //get name 
        var divId = data[3]; 
        $('#' + divId).html("" + Name); 

       } 
     }); 


    } 
}); 

Проблема с вами в том, что div.id значение обновляется, прежде чем получить ответ и последние DIV заполняются, поскольку цикл будет быстрее, чем запрос

еще одно решение может быть определяющим функцию и передать идентификатор контейнера к нему

function loadContentInto(divId) { 
    $.ajax({ 
     url: 'myapi.php', //the script to call to get data   
     data: "", 
     async: false, //you can insert url argumnets here to pass to api.php for example "id=5&parent=6" 
     dataType: 'json', //data format  
     success: function(data) //on recieve of reply 
      { 
       var Name = data[2]; //get id 
       //var vname = data[1];   //get name 

       $('#' + divId).html("" + Name); 

      } 
    }); 
} 

и вызвать этот метод из вашего цикла

for (var i = 0; i < n; i++) { 
    var div = document.createElement('div'); 

    div.className = "d5"; 
    div.id = i + 1; 


    document.getElementById('container').appendChild(div); 
    loadContentInto(div.id); 

} 

Я надеюсь, что может помочь :)