不同用户操作触发的AJAX请求success函数互相触发问题解决

核心原因 #

你遇到的问题大概率是AJAX全局事件被共用，或者重复绑定了事件处理函数，导致不同请求的回调被错误触发。

具体解决方法 #

1. 为每个AJAX请求使用独立回调，禁用全局事件 #

确保每个AJAX请求只绑定专属的success回调，同时通过global: false参数关闭当前请求的全局事件触发，避免影响其他请求：

// 事件1：表单submit事件
$('#template_informations').on('submit', function(e) {
  e.preventDefault(); // 阻止表单默认提交行为
  $.ajax({
    url: '你的目标接口URL',
    type: 'POST',
    data: $(this).serialize(),
    global: false, // 禁用当前请求的全局AJAX事件
    success: function(response) {
      // 仅处理当前请求的回调逻辑
      $('.code').text(response);
    }
  });
});

// 事件2：按钮click事件
$('#test-template').on('click', function() {
  $.ajax({
    url: '你的目标接口URL',
    type: 'POST',
    data: $('#template_informations').serialize(),
    global: false, // 禁用当前请求的全局AJAX事件
    success: function(response) {
      // 仅处理当前请求的回调逻辑
      $('.test-field').html(response);
    }
  });
});

2. 清除重复的事件绑定 #

如果代码中存在重复执行事件绑定的场景（比如异步加载脚本重复绑定），会导致同一个事件被绑定多个处理函数，触发时多个回调同时执行。可以先解绑再绑定，避免重复：

// 先解绑原有事件，再绑定新的处理函数
$('#template_informations').off('submit').on('submit', function(e) {
  e.preventDefault();
  // AJAX请求代码...
});

$('#test-template').off('click').on('click', function() {
  // AJAX请求代码...
});

3. 给请求添加唯一标识，在回调中判断（不推荐，仅作备选） #

如果必须使用全局事件，可在请求时添加自定义标识，在回调中判断是否执行对应逻辑：

// 事件1的AJAX请求添加自定义标识
$.ajax({
  url: '你的目标接口URL',
  data: $(this).serialize(),
  context: { requestType: 'formSubmit' }, // 添加自定义标识
  success: function(response) {
    if (this.requestType === 'formSubmit') {
      $('.code').text(response);
    }
  }
});

// 事件2的AJAX请求添加自定义标识
$.ajax({
  url: '你的目标接口URL',
  data: $('#template_informations').serialize(),
  context: { requestType: 'testClick' }, // 添加自定义标识
  success: function(response) {
    if (this.requestType === 'testClick') {
      $('.test-field').html(response);
    }
  }
});

关键注意事项 #

• 优先保证每个AJAX请求的回调是专属的，不要混用全局回调
• 避免在循环、异步加载的代码块中重复绑定事件处理函数
• 表单提交事件必须添加e.preventDefault()，阻止默认跳转导致的意外触发

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