如何使用javascript循环JSON响应

时间:2014-04-17 14:37:25

标签: javascript php ajax loops

我使用以下ajax:

       $.ajax({ 
                 type: 'POST', 
                 url: '/search/search.php', 
                 crossDomain: true,
                 data:  {data: data},
                 dataType: 'json', 
                 async: false,

                 success: function (response){ 
                    if (response.success) 
                        {
                           $('#search-results').show();

                           for(field in response.data){

                           error = response.field_errors[field];           

                               var name = field.name;
                               var barcode = field.barcode;
                               var serial = field.serial;

                               $("#searchname").html(name);
                               $("#searchbarcode").html(barcode);
                               $("#searchserial").html(serial);


                           }
                        } 
                    else {
                        console.log("fail");
                    }
                 },

               }); 

我试图遍历从php返回的行,并将每一行作为一行放在我的html表中。我从php得到了正确的响应,但是我的循环没有'在html中显示任何内容。

HTML表格

        <table class="table" id="search-results" style="display:none;">
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Serial</th>
              <th>Barcode</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td id="searchname"></td>
              <td id="searchbarcode"></td>
              <td id="searchserial"></td>
            </tr>
          </tbody>
        </table>

PHP

    $json = array();
    if($num > 0)
    {

        $json['success'] = TRUE;
        $i = 0;
 while ($row = mysql_fetch_array($sql))
 {
    $json[$i]['data']['name'] = $row['name'];
    $json[$i]['data']['barcode'] = $row['barcode'];
    $json[$i]['data']['serial'] = $row['serial'];

    $i++;
}
    }
    else
    {
        $json['success'] = FALSE;
    }

    echo json_encode($json);

1 个答案:

答案 0 :(得分:3)

您可以使用jquery .each()。 itterate数组,jquerys .append()添加表行:

如果数据是对象数组:

$.each(response.data, function( index, item ) {
    $('#search-results').append('<tr><td>' + item.name + '</td><td>' + item.barcode + '</td><td>' + item.serial + '</td><td></tr>');
});

如果是一个数组数组:

$.each(response.data, function( index, item ) {
    $('#search-results').append('<tr><td>' + item['name'] + '</td><td>' + item['barcode'] + '</td><td>' + item['serial'] + '</td><td></tr>');
});

https://api.jquery.com/jQuery.each/

编辑你的php创建奇怪的json,因此你的问题。解决它:

$json = array();
if($num > 0)
{

    $json['success'] = TRUE;

    while ($row = mysql_fetch_array($sql))
    {
          $json['data'][]=array('name'=>$row['name'], 'barcode'=>$row['barcode'], 'serial'=>$row['serial']);
    }
}
else
{
    $json['success'] = FALSE;
}

echo json_encode($json);