为何使用Bootstrap模态框的AJAX请求返回双重响应？

兄弟，我之前也踩过一模一样的坑！明明控制台显示只发了一次请求，结果响应却重复输出，大概率是事件绑定重复触发搞的鬼，尤其是和Bootstrap模态框结合的时候特别容易出现这种情况，给你梳理几个最常见的原因和解决办法：

1. 模态框生命周期事件重复绑定回调 #

Bootstrap模态框有show.bs.modal、shown.bs.modal这类生命周期事件，如果你每次打开模态框时都在事件监听里绑定AJAX的成功回调，或者把AJAX请求直接写在事件内部，而没做解绑处理，就会导致每次弹窗都多绑定一次回调函数。举个错误示例：

// 踩坑写法：每次模态框显示都重新绑定一次AJAX回调
$('#myModal').on('shown.bs.modal', function() {
  $.ajax({
    url: '/your/api/route',
    success: function(data) {
      console.log(data); // 打开两次模态框，这里就会执行两次
    }
  });
});

修复方案：

• 用off()先解绑再绑定，确保每次只有一个回调生效：

// 正确姿势：先清除旧绑定，再绑定新逻辑
$('#myModal').off('shown.bs.modal').on('shown.bs.modal', function() {
  $.ajax({
    url: '/your/api/route',
    success: function(data) {
      console.log(data);
    }
  });
});

• 或者把AJAX的成功回调写成独立函数，只定义一次，避免每次在事件里重复创建。

2. 触发按钮的点击事件被重复绑定 #

你提到是按钮触发脚本，如果这个按钮的点击事件被绑定了多次（比如页面加载时绑了一次，模态框动态加载后又绑了一次），也会导致AJAX请求的回调重复执行。
修复方案：

• 绑定事件前先清除旧绑定：

$('#triggerBtn').off('click').on('click', function() {
  // 这里写AJAX请求代码
});

• 如果是动态生成的按钮，用事件委托时要确保委托的父元素是静态存在的，不要每次模态框加载都重新委托：

// 正确的委托方式：父元素是页面初始就有的，只绑定一次
$('body').off('click', '#triggerBtn').on('click', '#triggerBtn', function() {
  // AJAX请求逻辑
});

3. Bootstrap原生属性和自定义脚本冲突 #

如果你的按钮同时用了Bootstrap的data-toggle="modal"属性，又自己写了点击事件发起AJAX，可能会触发隐性的事件重复（不过你说控制台只显示一次请求，这个概率稍低，但可以排查）。
修复方案：

• 要么去掉data-toggle属性，完全用自定义脚本打开模态框并发起AJAX；
• 要么在自定义点击事件里加上event.preventDefault()，阻止默认行为干扰。

4. 后端接口的小概率问题 #

虽然你说只发起了一次请求，但也可以顺便查下后端日志，确认是不是接口被调用一次却返回了两次数据？不过这种情况比较少见，优先排查前端事件绑定的问题。

总的来说，90%的概率都是事件重复绑定导致的，你可以先检查代码里的模态框事件、按钮点击事件的绑定逻辑，看看有没有重复绑定的情况~

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