Question

我有一个发送ajax请求的表单，该请求从cURL请求返回一个json对象。我使用表格使用开始和结束日期查询API。我设法显示返回到表中的数据。现在我的问题是，每当我从上一个请求获得的表之后，每次从我的表单发出新请求时，都会在表单页面上显示一个新表，有没有办法只显示一个表，所以在每个表单上请求将以前的数据替换为新数据？

这是我的JavaScript代码

**$(document).ready(function() {
  // Function to create table layout
  function createTable(data) {
    var table = document.createElement('table');
    var header = table.insertRow();
    for(var h in data[0]) {
      var th = document.createElement('th');
      th.innerHTML = h;
      header.appendChild(th);
    }
    table.classList.add('table','table-bordered');
    data.forEach(function(item) {
      var row = table.insertRow();
      for(var v in item) {
        var cell = row.insertCell();
        if (Array.isArray(item[v])) {
          var subtable = createTable(item[v]);
          cell.appendChild(subtable);
        }
        else {
          cell.innerHTML = item[v];
        }
      }
    })
    return table;
  }
  // Initialize air datepicker plugin
  $('.air-datepicker').datepicker();
  // Store form into variable
  var form= $("#requestForm");
  // Actions when form is submitted
  $('#submitForm').click(function(e) {
    // Ajax request
    $.ajax({
      type: "POST",
      url: form.attr("action"),
      data: form.serialize(),

      success: function(result){
        // Show the table container
        $('#tableContainer').css('display','block');
        // Convert reponse into JSON
        datas = JSON.parse(result);
        // Get nome condominio and show it
        $('#nome_condominio').html(datas.condomini[0].condominio.nome);
        // Get indirizzo condomino and show it
        $('#indirizzo_condominio').html(datas.condomini[0].condominio.indirizzo);
        // Put datas into table using the function createTable
        var table = createTable(datas.condomini[0].ricevute);
        // Show table 
        $('#table').append(table);
        console.log(result);
      },
      error: function(error, status, xhr) {
        console.log(error, status, xhr);

      }
    }); // Fine ajax

   e.preventDefault(); // Prevent form to be sent
  }); // fine submit form

}); // fine document ready**

Answer 1

使用

// Show table
$('#table').html(table);

您替换DOM节点#table的html内容，而不是将新表附加到现有内容（包括之前生成的表）上。

现在，如果#table在通话时为空，那么该解决方案就可以了。

否则，如果有任何内容（例如表头）被删除，则必须找到一种方法来重建它。

更新页面内容cURL和ajax，而无需刷新页面

1 个答案: