javascript - 以表格格式显示 JSON 结果

Question

 $.ajax({
     type: 'GET',
     url: 'die_issue_result.php',
     data: {
         vals: die_no
     },
     dataType: "json", //to parse string into JSON object,
     success: function (data) {
         if (data) {
             var len = data.length;
             var txt = "";
             if (len > 0) {
                 for (var i = 0; i < len; i++) {
                     if (data[i].die_no && data[i].status && data[i].location) {
txt += "<tr><td>"+data[i].die_no+"</td><td>"+data[i].status+"</td><td>"+data[i].location+"</td></tr>";
                     }
                 }
                 if (txt != "") {
                     $("#table").append(txt).removeClass("hidden");
                 }
             }
         }
     }

Controller 页面

$die_no = array();
$status = array();
$location = array();
while ($row = mysql_fetch_array($query)) {
    $die_no[] = $row["die_no"]; // or smth like $row["video_title"] for title
    $status[] = $row["status"];
    $location[] = $row["location"];

}
$res = array($die_no, $status, $location);
echo json_encode($res);

HTML 页面

<p>
    <table id="table" class="hidden">
        <tr>
            <th>die_no</th>
            <th>Status</th>
            <th>Location</th>
        </tr>

我想以 HTML 表格格式显示结果，所以我将数组格式的结果传递给 Json，但结果没有显示在 HTML 页面中。我可以通过使用 network option 下的 chrome Inspect element 来查看响应。请帮助我以 HTML 表格格式显示检索到的结果。

Answer 1

如果您在成功响应中添加 console.log(data)，您可以看到该对象的结构。

要访问所需的 json 值，您应该尝试 data['die_no'][i],data['status'][i],data['location'][i]。

您可以像这样插入响应:

<table id="tbl">
</table>

Javascript:

 $.ajax({
 type: 'GET',
 url: 'die_issue_result.php',
 data: {
     vals: die_no
 },
 dataType: "json", //to parse string into JSON object,
success: function (data) {
         if (data) {
         var len = data.length;
             if (len > 0) {
                 for (var i = 0; i < len; i++) {                         
                  $('$tbl').append("<tr><td>"+data['die_no'][i]+"</td><td>"+data['status'][i]+"</td><td>"+data['location'][i]+"</td></tr>");                         
                 }                     
             }
         }
}
}); //you missed this in your question