如何在发送Ajax请求前清空数据？解决动态页面重复数据问题

首先明确：这种情况完全不正常——每次AJAX请求的success回调里拿到的data应该是本次请求返回的全新数据，不会自动包含旧内容。你看到的新旧内容混合，大概率是代码里的逻辑漏洞导致的，而非AJAX本身的问题。

先揪出你代码里的几个关键问题 #

1. 表格ID不匹配：你的表格HTML里ID是achats_table，但JS代码里操作的是#table——这直接导致你写的clear()、destroy()、empty()完全没生效，旧表格内容一直留在页面上，新数据加上去后就看起来像是data里混了新旧内容。
2. 错误嵌套$(document).ready()：把ready事件放在submitForm()函数里毫无意义，ready只会在DOM加载完成时触发一次，后续调用函数时这段代码不会再执行。
3. 无效的beforeSend操作：你在beforeSend里写data = {}，但success回调里的data是局部参数，和这个全局的data不是同一个变量，这个操作对清空请求返回的数据没有任何作用。

修正后的完整解决方案 #

1. 修正HTML（移除冗余的inline事件）

<form method="GET" action="" class="form-horizontal" id="form">
  <button type="submit">Update table</button>
</form>

<table class="table table-striped display nowrap col-md-12" id="achats_table">
  <thead>
    <tr style="border-bottom:2px dashed #ccc"></tr>
  </thead>
  <tbody></tbody>
  <tfoot align="right">
    <tr></tr>
  </tfoot>
</table>

2. 修正JavaScript（规范逻辑与变量作用域）

$(document).ready(function() {
  // 把submitForm放在ready内部，确保DOM加载完成后才能操作元素
  function submitForm() {
    // 先处理表格：销毁旧实例 + 清空DOM内容
    const tableId = '#achats_table';
    if ($.fn.DataTable.isDataTable(tableId)) {
      $(tableId).DataTable().destroy(); // 先销毁DataTable实例
    }
    // 清空表格的表头、内容、页脚
    $(`${tableId} thead tr`).empty();
    $(`${tableId} tbody`).empty();
    $(`${tableId} tfoot tr`).empty();

    // 序列化表单参数
    const formParams = $("#form").serialize();
    console.log('请求参数：', formParams);

    $.ajax({
      type: "GET",
      dataType: "json",
      url: '/api/test?' + formParams,
      success: function(response) {
        // 用response命名避免和全局变量混淆，提取返回的有效数据
        const newData = response.data;
        console.log('本次请求返回的全新数据：', newData); // 可打印确认数据是否纯净

        // 动态生成表头（如果需要的话）
        if (newData.length > 0) {
          const headers = Object.keys(newData[0]);
          const headerRow = $(`${tableId} thead tr`);
          headers.forEach(header => {
            headerRow.append(`<th>${header}</th>`);
          });

          // 动态生成表格内容
          const tbody = $(`${tableId} tbody`);
          newData.forEach(item => {
            const row = $('<tr></tr>');
            headers.forEach(header => {
              row.append(`<td>${item[header] || ''}</td>`);
            });
            tbody.append(row);
          });
        }

        // 重新初始化DataTable
        $(tableId).DataTable({
          responsive: true,
          // 这里可以添加你的分页、排序等配置
        });
      },
      error: function(xhr, status, error) {
        console.error('请求出错：', error);
      }
    });
  }

  // 用事件绑定代替inline onclick，更符合现代JS规范
  $('#form button[type="submit"]').on('click', function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    submitForm();
  });
});

核心修复点说明 #

• ID统一：确保JS操作的表格ID和HTML里的完全一致，这样销毁、清空操作才能真正生效，彻底清除旧内容。
• 变量隔离：用const/let声明局部变量，避免全局变量混淆；把AJAX返回的参数命名为response，和可能存在的全局data划清界限。
• 正确的表格生命周期：每次请求前先销毁旧的DataTable实例，再清空DOM内容，最后用新数据重新初始化，从根源避免内容残留。
• 移除冗余代码：把$(document).ready()放在最外层，确保所有DOM操作都在页面加载完成后执行。

现在你再测试，每次点击按钮后，success里的newData只会是本次请求返回的全新数据，表格也会完全替换成新内容，不会再出现新旧混合的情况。

内容的提问来源于stack exchange，提问作者user9775298