Ajax提交表单有重复日期校验仍提示提交成功该如何修复

你当前的AJAX逻辑中，success回调仅在HTTP请求本身成功（比如返回200状态码）时就触发，不会识别后端业务层面的校验结果（比如日期重复、入库失败等业务异常），因此无论实际入库是否成功，都会弹出提交成功的提示。

第一步：调整后端接口返回规则 #

后端处理完请求后，返回结构化的JSON格式数据，明确标识业务处理结果，示例返回结构如下：

• 入库成功返回：{"code": 0, "msg": "提交成功"}
• 日期重复入库失败返回：{"code": 1, "msg": "当前日期已有记录，提交失败"}

第二步：修改前端AJAX逻辑 #

调整回调函数，根据后端返回的业务状态展示对应提示，同时补充HTTP请求异常的捕获逻辑，修改后完整代码如下：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
  $('#my_form').on('submit', function (e) {
    e.preventDefault();
    $.ajax({
      type: 'POST',
      url: '/main/store',
      data: $('#my_form').serialize(),
      dataType: 'json', // 声明预期返回数据格式为JSON
      success: function (res) {
        if (res.code === 0) {
          // 业务处理成功，弹出成功提示
          alert('表单提交成功');
          // 可补充提交成功后的后续逻辑，比如重置表单
          // $('#my_form')[0].reset();
        } else {
          // 业务处理失败，弹出后端返回的错误提示
          alert(res.msg);
        }
      },
      // 捕获HTTP请求层面的异常，比如接口报错、网络中断等
      error: function () {
        alert('网络异常，提交失败，请稍后重试');
      }
    });
  });
});
</script>
</head>

如果你的后端习惯用非200的HTTP状态码来标识业务失败，只需要把业务错误的处理逻辑同步补充到error回调中即可。

内容的提问来源于stack exchange，提问作者Данил Самойленко