如何将json数组显示为查询中的重复区域

Question

目前所有使用我的 jquery $.post 操作、成功连接、查询和 json_encode 都返回到我的页面。我无法做的（并且是 json 的新手）是如何将返回的值显示为实时提要？我当前的 jquery js 文件是'jquery-1.7.2.min.js'，我的代码是

    $(document).ready(function(){
      setInterval(function(){
      $.post('query.php', function(pendingReq){
      $('#div_id').html(pendingReq);
      }), 'json' });
    }, 5000

);

pendingReq 是我从查询中返回的数据，当前输出如下所示： {"[0]":"FirstReq", "[1]":"SecondReq", ...."} 基于我对数组的 mysql 查询构建

$res = array("[0]"=>var['1']...);

我对使用 json 非常陌生，并且不会使用很多 javascript，但希望将返回的数据显示在表格中，谢谢。

我下面的代码有效，但只有一行 mysql 查询，如果存在两个条目，我会在 Firebug 中收到“Uncaught SyntaxError: Unexpected token {”错误？？仍然像以前一样返回结果：

    $res = array("req_name"=>$ew_display['req_name'], "date"=>$ew_display['req_dt']);
echo json_encode($res);



$(document).ready(function(){
            var table_template = "<table border=1 cellspacing=0 id='results'><tr><th>JTAR #</th><th>JTAR @</th></tr></table>";
            $("#testd").html(table_template);
    setInterval(function(){
        $.post("query.php", {track : 2}, function(pendingReq){
            var json = JSON.parse(pendingReq);
            var template = "<tr><td>{{req_name}}</td><td>{{date}}</td></tr>";
            var new_row = Mustache.render(template, json); 
            $("#results").append(new_row).fadeIn("slow");
        }), "json"
}, 5000);

Answer 1

-- 编辑--

因为你有一个区间，模板可以是常数：

var table_template = "<table border=1 cellspacing=0 id='results_table'><tr><th>col1</th><th>col2</th></tr></table>";
$("#div_id").html(table_template);
var template = "<tr><td>{{[0]}}</td><td>{{[1]}}</td></tr>";

现在对于间隔，您可以解析结果字符串并渲染每一行：

setInterval(function() {
    $.post("query.php", function(pendingReq) {
        var json = JSON.parse(pendingReq);
        var new_row = Mustache.render(template, json); 
        $("#results_table").append(new_row);
    });
});

-- 结束编辑--

我是 Mustache.js (https://github.com/janl/mustache.js) 的忠实粉丝，它允许您将数据 (JSON) 与演示文稿 (HTML 表格) 分开。我不喜欢从您的服务器返回预先格式化为 HTML 的 AJAX 数据。您可以使用这样的语法（仅作为示例）：

var template = "<table>{{#item}}<tr><td>{{name}}</td><td>{{age}}</td><td>{{job}}</td></tr>{{/item}}</table>";
var html = Mustache.render(template, pendingReq);
$('#div_id').html(html);

Answer 2

jQuery 文档展示了如何在 ajax 回调函数中使用返回的 json：http://api.jquery.com/jQuery.getJSON/

但是，与其将查询结果返回为 json，不如返回 html（包含结果的表格代码），然后直接在 div 中显示该 html？

以下是执行类似操作的示例： Modifying the AJAX PHP database example

更新：如何将数据返回为 html 而不是 json：

好的，假设您的 php 脚本当前返回一个 json 编码的字符串：

$str_json = '{"0":"FirstReq", "1":"SecondReq", ...."}';

现在在 php 脚本中执行类似的操作 - 当然取决于您想要显示的内容：

$lst_data = json_decode($str_json);

$html = "<table>\n<tr>\n";
foreach ($lst_data as $i => $data) {
    $html .= "<th>" . $i . "</th>";
$html .= "</tr>\n<tr>\n";
foreach ($lst_data as $data) {
    $html .= "<td>" . $data . "</td>";
}
$html .= "</tr>\n</table>\n";

echo $html;

编辑：你可能有类似的东西：

$res = mysql_fetch_assoc($data);

// Remove this from your script:  echo json_encode($res);

// Add this:
$html = "<table>\n<tr>\n";
foreach ($res as $i => $r) {
    $html .= "<th>" . $i . "</th>";
$html .= "</tr>\n<tr>\n";
foreach ($res as $r) {
    $html .= "<td>" . $r . "</td>";
}
$html .= "</tr>\n</table>\n";

echo $html;

...记得将 jQuery $.post() 函数中的 dataType 设置为 html。

Answer 3

乍得，请为您的数组“$res”使用 json_encode()

echo json_encode($res);

如果php返回一个字符串，那么你可以使用

var json = JSON.parse(pendingReq);

一旦你得到 json 对象，你就可以使用 .运算符来访问属性。

首先找出你的 json 包含什么... 做：

alert(JSON.stringify(json));

stringify 将 json 对象转换为可读字符串 您可以使用 JSON.parse 转换回来； 您可以通过执行 json.property 来访问属性。

现在您可以拥有一个不断更新所有数据的表。 考虑这样一个对象： var obj = {name:"Adam",age:35,job:"Programmer"}; 您可以通过以下方式将此信息添加到表中：

$("#table").html($("#table").html() + "<tr><td>" + obj.name + "</td><td>" + obj.age + "</td><td>" + obj.job + "</td></tr>");