AJAX数据库数据编辑问题：表单提交无法阻止页面刷新

你遇到的核心问题是动态生成的表单没绑定上提交事件——你的表单是通过AJAX请求后才插入页面的，但原来的事件绑定代码是在页面初始加载时执行的，这时候表单还不存在，所以submit事件根本没绑定到这个动态表单上，点击提交按钮自然就触发了浏览器的默认提交行为，导致页面刷新。

解决方案：使用事件委托（Event Delegation） #

事件委托的思路是把事件绑定到一个原本就存在的父元素上，当动态生成的子元素（也就是你的表单）触发事件时，事件会冒泡到父元素，从而触发我们的处理函数。

把你的阻止提交代码改成下面这样：

$(function() {
  // 绑定到#showEdit这个初始就存在的容器元素上
  $("#showEdit").on("submit", "form#editCategory", function(z) {
    z.preventDefault(); // 现在能正常阻止默认提交行为了
    var formData = new FormData(this);
    
    $.ajax({
      url: "add-check.php",
      type: 'POST',
      data: formData,
      success: function(data){
        alert('worked');
        // 可以在这里添加成功后的操作，比如关闭模态框
        $('#addContactModal').modal('hide');
        // 还可以刷新表格数据，让修改结果立刻显示
      },
      cache: false,
      contentType: false,
      processData: false
    });
  })
});

额外的优化建议 #

• 避免重复生成模态框：你现在每次调用showEdit都会插入一个新的#addContactModal到页面，多次点击后页面会存在多个相同ID的模态框，容易引发奇怪的bug。建议把模态框的基础结构放在初始页面中，只动态替换表单内容：

  1. 初始页面添加：

     <div class="modal fade" id="addContactModal" tabindex="-1" role="dialog" aria-labelledby="addContactModalTitle" aria-hidden="true">
       <div id="modalContent"></div> <!-- 专门用来放动态加载的表单 -->
     </div>
     

  2. 修改showEdit的success回调：

     success: function(data){
       console.log(data);
       $('#modalContent').html(data); // 只替换表单内容，不重复生成模态框
       $('#addContactModal').modal('show');
     },
     

  3. 同时修改edit-check.php，只输出表单部分，去掉外层的模态框代码。

• 添加错误提示：在showEdit的AJAX回调里，如果返回的data是//（表示没找到对应分类），可以给用户提示：

  success: function(data){
    if(data === "//"){
      alert("该分类不存在！");
      return;
    }
    $('#modalContent').html(data);
    $('#addContactModal').modal('show');
  },
  

这样修改后，你的表单提交就能正常阻止默认行为，通过AJAX完成数据提交了。

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