我有连续的ajax调用如何构造一个包含返回数据的表

时间:2016-11-14 06:21:40

标签: javascript php jquery ajax

我处于server_side1 minute

中获取数据的情况

问题是我如何用返回的数据构建表?

我正在尝试这样的事情,但没有工作。

 <div id="table"></div>  <!-- my html -->


    var something = "abc";

function callEveryMin(){
         $.ajax({           
                url:"test.php",
               type:"POST",
               dataType:"json",
               data:{something:something},
               async: false,
               success: function(data){
                   var array = data.list;
                   console.log(array);
                   var table = '<table><tr><th> list value </th></tr>';
                   for(var i = 0; i<array.length;i++)
                   {
                        table += '<tr><td>'+array[i]+'</td></tr>';
                   }
                   table +='</table>';
                   $('#table').append(table);

              }
          });

}

// call the above function every minute

setTimeout(callEveryMin,60000);

我的php会像这样(test.php)

echo json_encode(array("list" => ['a','b','c']));  // first run

并且像第二次一样运行

echo json_encode(array("list" => ['e','f','g']));  // second run
等等......

我的问题是如何在每个<td>...</td>

上添加新的sucessive ajax call

请提前帮助我

2 个答案:

答案 0 :(得分:0)

尝试类似:

var something = "abc";
var firstCall = false;
var table = '';
function callEveryMin(){
         $.ajax({           
                url:"test.php",
               type:"POST",
               dataType:"json",
               data:{something:something},
               async: false,
               success: function(data){
                   var array = data.list;
                   console.log(array);
                   if(!firstCall){
                      table += '<table><tr><th> list value </th></tr>';
                      firstCall = true;
                   }

                   for(var i = 0; i<array.length;i++)
                   {
                        table += '<tr><td>'+array[i]+'</td></tr>';
                   }
                   table +='</table>';
                   $('#table').append(table);

              }
          });

}

假设您的ajax数据仅发送刷新值而不是旧值。

答案 1 :(得分:0)

试试这个

<div id="table"></div>  <!-- my html -->


    var something = "abc";

function callEveryMin(){
         $.ajax({           
                url:"test.php",
               type:"POST",
               dataType:"json",
               data:{something:something},
               async: false,
               success: function(data){
                   var array = data.list;
                   console.log(array);
                   var table = ($('#table').html() == '')?'<table><tr><th> list value </th> </tr>':'';//if #table don't have a data inside it then add this else add empty
                   for(var i = 0; i<array.length;i++)
                   {
                        table += '<tr><td>'+array[i]+' </td></tr> ';
                   }
                   table +=($('#table').html() == '')?'</table>':'';//if #table don't have a data inside it then add this else add empty
                   $('#table').append(table);

              }
          });

}

// call the above function every minute

setTimeout(callEveryMin,60000);