JQuery для получения нескольких данных из базы данных

Question

Пожалуйста, мне трудно написать jquery Loop для или для получения нескольких данных из базы данных. Ниже приведен фрагмент моего html-документа.

<form id="forgotpswdform" method='post'> 
<b>Name:<b><br> 
<input type="text" id='myname' name='myname' required pattern="[A-Za-z0-9.-_ 
]{5,10}"><br><br> 
<b>Password:<b><br> 
<input id="mypswd" name="mypswd" type="password" required pattern="[A-Za-z0- 
9&*]{8,12}"><br><br> 
<table id="syruptbl"> 
<tbody> 
<tr> 
<th>SYRUP</th> 
<th>GNAME</th> 
</tr> 
<tr> 
<td><input id="syrup1" name="syrup1" type="text"></td> 
<td><input id="gnme1" name="gnme1" type="text"> 
</tr> 
<tr> 
<td><input id="syrup2" name="syrup2" type="text"></td> 
<td><input id="gnme2" name="gnme2" type="text"><br> 
</tr> 
</tbody> 
</table> 
</form> 

Вот мой сценарий jquery. (Цель состоит в том, чтобы оставаться на одной странице).

 <script> 
     $(document).ready(function() { 
      $("#mypswd").change(function() { 
       var mydata = { 
       myname : $("#myname").val(), 
       mypswd : $("#mypswd").val(), 
       };   
       $.post("syrp_tbl.php", my2data, function(data) { 
        var a = data.indexOf(","); 
        var b = a + 1; 
        var res = data.slice(0, a); 
        $('#syrup1').text(res); 

        data = data.slice(b); 
        a = data.indexOf(","); 
        b = a + 1; 
        res = data.slice(0, a); 
        $('#gnme1').text(res); 

        data = data.slice(b); 
        a = data.indexOf(","); 
        b = a + 1; 
        res = data.slice(0, a); 
        $('#syrup2').text(res); 

        data = data.slice(b); 
        $('#gnme2').text(data);   
       }); 
      }); 
     });  
     </script> 

Это прекрасно работает. Однако чем больше данных, тем дольше будет скрипт. Как это сделать, используя цикл jquery for, loop while или любой другой метод? Спасибо.

Answer 1

Возвращение JSON с сервера и Переберите массив JSON на стороне клиента:

Если сервер возвращает:

{Items: [ 
    {"Item": "lol", "Key": "wtf"}, 
    {"Item": "kewl", "Key": "rofl"} 
]} 

затем

$.post("syrp_tbl.php", my2data, function(data) { 
    data = $.parseJSON(data); // You might not need this, depending on your config 
    $(data.Items).each(function(){ 
     $("#syruptbl").append(
      $("<tr>").append(
       $("<td>").text(this["Item"]) 
      ).append(
       $("<td>").text(this["Key"]) 
      ) 
     ); 
    }); 
});