Jquery Ajax POST请求Error函数执行不一致问题排查求助

问题根因 #

1. success回调逻辑结构错误：你使用了两个独立的if判断而非if-else if-else结构，当接口返回400状态时，第一个if执行完显示表单和错误的逻辑后，第二个if判断不满足500状态，会触发else分支的显示完成状态逻辑，直接覆盖刚渲染的表单。
2. success回调属性读取错误：jQuery ajax的success回调第一个参数是已经解析完成的响应体数据，不存在responseJSON属性，你写的data.responseJSON.type会直接抛出未定义异常，导致后续代码中断执行。
3. error回调无容错处理：你直接读取error.responseJSON.type，当遇到网络异常、网关超时返回非JSON格式响应时，responseJSON属性不存在，会抛出异常，导致前面的DOM状态更新代码执行中断。
4. 未加重复提交锁：多次点击提交会触发多个并发请求，不同请求的回调先后执行会导致状态被覆盖，出现状态混乱。
5. 缺失处理中状态隐藏逻辑：现有代码中没有任何隐藏“处理中”状态的逻辑，只要请求过程中代码抛出异常，就会一直停留在处理中状态。

修复方案 #

1. 修复success回调逻辑

success: function (data) {
  // 先隐藏处理中状态（替换为你实际的处理中状态选择器）
  $('#form-processing-state').hide();
  if (data.type == "bad_request" || data.status == 400 || data.status == 500) {
    $formErrorState.show();
    $formSuccessState.hide();
    $formCompleteState.hide();
    // 直接读取data属性，不需要responseJSON
    $formErrorStateText.text(data.type + ": " + data.description);
    $formInitialState.show();
  } else {
    $formCompleteState.show();
    $formSuccessState.hide();
    $formErrorState.hide();
    $formInitialState.hide();
  }
}

2. 修复error回调，增加容错处理

error: function (jqXHR) {
  // 先打印错误、隐藏处理中状态，保证日志优先输出
  console.error(jqXHR);
  $('#form-processing-state').hide();
  // 优先更新核心状态，避免后续赋值出错导致状态卡住
  $formSuccessState.hide();
  $formCompleteState.hide();
  $formErrorState.show();
  $formInitialState.show();
  // 增加属性存在性判断，避免异常
  let errMsg = "请求异常，请稍后重试";
  if (jqXHR.responseJSON?.type && jqXHR.responseJSON?.description) {
    errMsg = `${jqXHR.responseJSON.type}: ${jqXHR.responseJSON.description}`;
  }
  $formErrorStateText.text(errMsg);
}

3. 增加提交锁避免重复提交

// 全局定义提交锁变量
let isSubmitting = false;

function simOrderRequest(token, fData){
  if (isSubmitting) return;
  isSubmitting = true;
  // 显示处理中状态
  $('#form-processing-state').show();
  console.log(fData);
  console.log(JSON.stringify(fData));
  $.ajax({
    method: 'POST',
    url: 'https://control.dev.yomobile.xyz/api/v1.0/sim-request/confirm/?token='+token,
    data: JSON.stringify(fData),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    // 原有success、error逻辑不变
    complete: function() {
      // 无论请求成功失败都释放锁
      isSubmitting = false;
    }
  });
}

4. 可选优化

如果你的表单会被动态渲染替换，不要提前缓存DOM变量，每次使用时直接通过选择器获取，避免操作已经被销毁的DOM节点。

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