Question

所以，我一直在努力为我的问题找到解决方案，但由于我不是jquery / ajax的高级用户，也许我正在寻找错误的东西，所以我希望有人可以帮助我。

<小时/>

目标

我的主要目标是构建一个'订单表'，我希望这个表在DataBase有新的传入订单时更新并插入一个新条目。无需页面刷新。因此，每当客户在网站上发布新订单时，管理表就会在表格顶部插入一行数据。

<小时/>

我有什么

现在我正在使用 AJAX 来调用带有所有信息的 JSON 文件。正在使用 PHP 代码编写 JSON 文件。 JSON / PHP 没有问题，我可以在创建新条目时编写/更新文件，我不需要手动运行任何脚本等等。

<小时/>

CODE

这是我到目前为止的代码：

AJAX加载JSON并在table =

上写入数据

$(document).ready(function() {
    var url = "data/results.json";
    $.getJSON(url, function (response){
        var write;
        $.each (response, function (index, table) {
            write += '<tr><td>' + table.name + '</td><td>' + table.data + '</td>';
            if (table.status === true) {
                write += '<td class="ap">Aprovado</td>'; 
            } else {
                write += '<td class="ng">Negado</td>';
            }
            write += '<td>' + table.id + '</td><td><button class="bt_delete">Deletar</button></td></tr>';
        }); //end each
        $('#mytable').html(write);
    }); //end getJSON
});

我尝试使用此代码更新表，但它不起作用。我确实有控制台日志，但表格没有更新：

var $container = $("#mytable");
var refreshId = setInterval(function()
{
    $container;
    console.log("loaded");
}, 10000);

希望有人可以帮助我！

Answer 1

setInterval()实际上并没有对container执行任何操作，只需将其分配给$('#mytable')，这就是您获取console.log()但没有其他内容的原因。

请参阅下面的代码段。

function buildTable() {

  var url = "data/results.json";
  $.getJSON(url, function(response) {
    var write;
    $.each(response, function(index, table) {
      write += '<tr><td>' + table.name + '</td><td>' + table.data + '</td>';
      if (table.status === true) {
        write += '<td class="ap">Aprovado</td>';
      } else {
        write += '<td class="ng">Negado</td>';
      }
      write += '<td>' + table.id + '</td><td><button class="bt_delete">Deletar</button></td></tr>';
    }); //end each
    $('#mytable').html(write);
  }); //end getJSON

}

$(document).ready(function() {
  var refresh = setInterval(function() {
    buildTable();
  }, 10000);
});

修改

Fiddle带有演示，显示附加到表的buidTable()函数，而不是重新创建它。

var isFirst = true;
var refresh = setInterval(function() {
    buildTable(isFirst);
    isFirst = false;
}, 10000);

function buildTable(isFirst) {

    if ( isFirst ) {
        // Old code goes here for the first time it is ran.
    } else {
        // Append to the table instead of building it.
        // Change row to be that of your json data source from .getJSON()
        var row = "<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>";
        $('.table > tbody').append(row);
    }

}

使用ajax和json自动更新表

目标

我有什么

CODE

1 个答案:

修改