如何正确使用div刷新？点击提交后div清空无返回数据问题求解

存在的问题 #

• 异步执行顺序错误：$.ajax是异步操作，你当前把load()写在ajax请求外部，会导致插入请求刚发出、还没等数据库写入完成就提前执行了div刷新，此时数据库还没有新数据，自然无法加载到最新内容。
• HTML结构不规范：<tbody>标签只能作为<table>的直接子元素使用，你当前直接把tbody放在div下，浏览器渲染时会自动剔除无效的tbody结构，导致$("#id_data")匹配不到对应元素，load返回的内容无法正确插入。
• POST请求参数写法错误：POST请求的参数不应该拼接在URL中，应该放在ajax的data字段里传递，避免特殊字符转义、长度限制等问题。
• 事件对象未正确接收：点击回调函数没有声明接收event参数，部分浏览器下event.preventDefault()会执行失败，可能触发页面默认提交刷新，影响内容加载。

修复代码 #

1. 修正HTML结构 #

<div class="listTable">
  <!-- 新增table标签包裹tbody，符合DOM规范 -->
  <table>
    <tbody id="id_data">
                        
    </tbody>
  </table>
</div>

2. 修正JS逻辑 #

$('#submitBtm').on('click', onSubmit = (event) => { // 声明接收event参数
  // 提前阻止默认行为，避免页面意外跳转
  event.preventDefault();

  const first_nameV = document.getElementById("first_name").value;
  const last_nameV = document.getElementById("last_name").value;
  const emailV = document.getElementById("email").value;
  const departmentV = document.getElementById("department").value;
        
  $.ajax({
    type: "POST",
    url: "companydirectory/libs/php/insertAll.php",
    // POST参数统一放到data字段传递
    data: {
      first_name: first_nameV,
      last_name: last_nameV,
      email: emailV,
      departmentID: departmentV
    },
    success: function(data) {
      // 插入数据库成功后再执行刷新，保证能拿到最新数据
      $("#id_data").load(location.href + " #id_data");
    },
    error:  function(request,error) {
      console.log(request)                                   
    }
  })
})

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