json_encode格式化表

时间:2018-01-12 03:10:58

标签: php jquery json

我使用jquery从PHP文件中获取一些数据。我获取数据但它只输出获取表中的第一行。 这是我的PHP代码

$data = array();
while ($rowtwo = $queryresult->fetch_assoc()){
   $data['id'] = json_encode($rowtwo['id']);
   $data['Name'] = json_encode($rowtwo['Name']);
   $data['Surname'] = json_encode($rowtwo['Surname']);
   $data['Time'] = json_encode($rowtwo['Time']);
   $data['Date'] = json_encode($rowtwo['Date']);
}

echo json_encode($data);

那就是我的jQuery代码

$(document).ready(function(){
setInterval(function(){
$.getJSON("http://www.blablabla.com/phpfile.php", function (data){
$("#Id").html( data.id );
$("#Name").html( data.Name);
$("#Surname").html( data.Surname);
$("#Time").html( data.Time );
$("#Date").html( data.Date );
});
},1000);
});

结果只有一行,但在我的表中我有5行。

2 个答案:

答案 0 :(得分:0)

问题是您要替换$data上的每个值。您必须推送$data数组

上的每个条目
$data = array();
while ($rowtwo = $queryresult->fetch_assoc()){
    $temp = array();

    $temp['id'] = $rowtwo['id'];
    $temp['Name'] = $rowtwo['Name'];
    $temp['Surname'] = $rowtwo['Surname'];
    $temp['Time'] = $rowtwo['Time'];
    $temp['Date'] = $rowtwo['Date'];

    $data[] = $temp;
}

echo json_encode($data);

在您的jQuery代码上。你必须循环。

<table>
    <tbody id="mydangertwo"> 
    </tbody> 
</table>

$(document).ready(function(){
    setInterval(function(){
        $.getJSON("http://www.blablabla.com/phpfile.php", function (data){

            var htmlText = "";

            for ( var key in data ) {
               //Access each entry  using the variables below
               //data[ key ].id
               //data[ key ].Name
               //data[ key ].Surname
               //data[ key ].Time
               //data[ key ].Date

               htmlText += "<tr class='danger'>";
               htmlText += "<td>" + data[ key ].id + "</td>";
               htmlText += "<td>" + data[ key ].Name + "</td>";
               htmlText += "<td>" + data[ key ].Surname + "</td>";
               htmlText += "<td>" + data[ key ].Time + "</td>";
               htmlText += "<td>" + data[ key ].Date + "</td>";
               htmlText += "</tr> ";
          }

          //Append to mydangertwo
          $( "#mydangertwo" ).append( htmlText );
        });
    },1000);
});

答案 1 :(得分:0)

埃迪,是的,现在它奏效了!我必须做的唯一改变是.append(htmlText)到.html(htmlText),因为.append方法一直在循环这些值!真的很谢谢你。如果您只想解释代码及其工作原理。