以表格格式显示JSON结果

时间:2015-09-22 11:49:48

标签: javascript jquery html json

 $.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");
                 }
             }
         }
     }

控制器页面

$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页面中。 我可以通过在网络选项下使用chrome Inspect元素来查看响应。请帮我以HTML表格格式显示检索到的结果。

3 个答案:

答案 0 :(得分:1)

如果在succes响应中添加console.log(数据),则可以看到对象的结构。

要访问所需的json值,您应该尝试数据['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

答案 1 :(得分:0)

您有语法错误: 使用

txt += <tr><td>

而不是

txt += tr><td>

在条件

之后

答案 2 :(得分:0)

使用此

2.0.0

实际上你的php代码没有返回键值对。所以在你的js中你不能使用data.die_no等 像我一样使用它:

$.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[0][i] || data[1][i] || data[2][i]) {
                                txt += "<tr><td>" + data[0][i] + "</td><td>" + data[1][i]  + "</td><td>" + data[2][i]  + "</td></tr>";
                            }
                        }
                        if (txt != "") {
                            $("#table").append(txt).removeClass("hidden");
                        }
                    }
                }
            }
        });