提交表单后同页表格显示异常：数据存库但UI闪显后消失

我来帮你分析下这个问题哈——你说数据已经成功存到数据库，但表格里的内容刚显示就没了，核心原因就是普通HTML表单的默认提交行为会触发页面刷新！

当你点击保存按钮时，浏览器会按照表单的action地址发送POST请求，默认会加载这个请求的响应页面（也就是刷新当前页）。你看到的短暂显示，应该是提交后临时插入到表格里的内容，但页面一刷新，整个页面的DOM就被重新渲染了，之前插入的内容自然就没了。

下面给你两种可行的解决方案，按需选就行：

方案一：用AJAX异步提交（推荐，无页面刷新） #

这种方式不会刷新页面，提交成功后直接把数据加到表格里，就能稳定显示了。

第一步：修改表单，阻止默认提交 #

给表单加个ID，然后阻止它的默认提交行为：

<form id="empForm" action="/EmployeesStatus/empformsubmit" method="post">
  <table>
    <tr id="rowid">
      <td>
        <input type="hidden" id="empemailid" name="empemailname" value="${showid}" readonly="readonly">
      </td>
      <!-- 你的其他表单字段 -->
      <td><button type="submit">保存</button></td>
    </tr>
  </table>
</form>

<!-- 用来展示数据的表格，给它加个ID方便操作 -->
<table id="empDataTable">
  <tr>
    <th>员工邮箱</th>
    <!-- 其他表头根据你的需求加 -->
  </tr>
</table>

第二步：写JS处理AJAX提交 #

用原生JS就能实现，不用额外框架：

// 获取表单元素
const empForm = document.getElementById('empForm');
// 监听表单提交事件
empForm.addEventListener('submit', function(e) {
  // 阻止默认的页面刷新提交
  e.preventDefault();
  
  // 收集表单里的所有数据
  const formData = new FormData(this);
  
  // 创建AJAX请求
  const xhr = new XMLHttpRequest();
  xhr.open('POST', this.action, true);
  
  // 请求成功后的处理
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 假设后端返回保存成功的员工数据（JSON格式）
      const savedEmp = JSON.parse(xhr.responseText);
      
      // 往表格里插入新行
      const table = document.getElementById('empDataTable');
      const newRow = table.insertRow();
      
      // 插入邮箱单元格
      const emailCell = newRow.insertCell();
      emailCell.textContent = savedEmp.empemailname;
      
      // 这里可以继续插入其他表单字段对应的单元格，比如姓名、状态之类的
      // ...
      
      // 可选：清空表单，方便下次提交
      empForm.reset();
    } else {
      alert('提交失败啦，再试一次吧');
    }
  };
  
  // 发送请求
  xhr.send(formData);
});

注意：后端要配合调整 #

你的后端接口/EmployeesStatus/empformsubmit保存数据后，需要返回保存成功的员工数据（JSON格式），而不是直接返回页面哦。

方案二：保留表单默认提交，后端返回当前页面并带数据 #

如果你不想用AJAX，也可以让后端在保存数据后，把数据放到请求域里，再转发回当前页面，页面加载时自动渲染新数据。

后端示例（以Java Servlet为例） #

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // 1. 获取表单数据，执行保存逻辑
  String empEmail = request.getParameter("empemailname");
  // ... 处理其他参数，保存到数据库的代码
  
  // 2. 把保存好的数据放到request域中
  request.setAttribute("newEmp", empEmail); // 也可以封装成对象传过去
  
  // 3. 转发回当前页面，这样不会刷新跳转，而是直接渲染当前页
  RequestDispatcher dispatcher = request.getRequestDispatcher("/你的当前页面路径");
  dispatcher.forward(request, response);
}

前端页面渲染新数据 #

在页面的表格里，用EL表达式取出后端传过来的数据，自动添加新行：

<table id="empDataTable">
  <tr>
    <th>员工邮箱</th>
    <!-- 其他表头 -->
  </tr>
  <!-- 原来的表格行 -->
  
  <!-- 如果有新提交的数据，就渲染这一行 -->
  <c:if test="${not empty newEmp}">
    <tr>
      <td>${newEmp}</td>
      <!-- 其他字段对应的单元格 -->
    </tr>
  </c:if>
</table>

（注：如果用JSP的话，记得先引入JSTL标签库哦）

总结一下，AJAX的方式体验更好，不会让页面闪烁；如果是传统后端渲染的项目，方案二也能解决问题。你之前的代码应该是没阻止表单的默认提交，导致页面刷新覆盖了临时添加的内容，按上面的方法调整就没问题啦。

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