Question

目前所有使用我的jquery $ .post操作，成功连接，查询和json_encode都返回到我的页面。我无法做的（以及json的新手）是如何将返回值显示为实时Feed？我当前的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中得到一个“未捕获的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

Chad，请为你的数组使用json_encode（）＆＃34; $ res＆＃34;

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：＆＃34; Adam＆＃34 ;, age：35，job：＆＃34; Programmer＆＃34;}; 您可以通过以下方式将此信息添加到表中：

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

Answer 3

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。

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

3 个答案: