使用AJAX实现HTTP POST表单提交后原页显示提示消息的问题

问题根因 #

• 未阻止表单默认提交行为：浏览器默认点击表单提交按钮会直接发起请求并跳转页面，你的AJAX逻辑没有拦截这个默认行为，导致还没跑AJAX就已经跳页了
• 接口路径不匹配：后端暴露的POST接口是/insertdb，前端AJAX配置的url为/dbinsert，路径完全不对应
• 回调变量名错误：AJAX成功回调的接收参数是response，但代码里用未定义的data变量读取返回值，逻辑执行失败
• 未绑定AJAX逻辑到表单提交事件：你当前写的AJAX代码只会在页面加载时执行一次，不会在点击提交按钮时触发

解决方案 #

1. 给你的表单添加id标识，方便绑定事件，示例如下：

<form id="submitForm">
  <!-- 原有表单输入项保持不变 -->
  <button type="submit">提交数据</button>
</form>

2. 替换原有AJAX代码，绑定表单提交事件、阻止默认跳转、修正配置项：

<script>
// 注意要先引入jQuery依赖，否则$符号会报错
$('#submitForm').submit(function(e) {
  // 核心：阻止表单默认提交跳转行为
  e.preventDefault();
  $.ajax({
    url: "/insertdb", // 修正为和后端一致的接口路径
    type: "post",
    data: $(this).serialize(), // 自动序列化表单内所有输入数据
    cache: false,
    success: function(response) {
      // 修正变量名，用回调接收的response参数判断返回值
      if(response.success) {
        alert("success");
      }
    },
    error: function () {
      alert("There has been an error");
    }
  });
});
</script>

3. 后端原有逻辑保持不变即可。

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