如何解决AJAX回调结果触发两次的问题？附相关代码

看到你遇到AJAX回调结果触发两次的问题，结合你贴的代码，我来帮你分析下常见原因和针对性解决办法：

常见触发两次的原因 #

• 脚本被重复引入：你的JS代码所在的脚本文件可能被加载了两次，导致$(document).ready里的事件绑定执行了两次，每次点击都会触发两次AJAX请求
• 事件绑定重复：如果.apply元素是动态生成的（比如通过其他AJAX渲染出来），后续再次执行绑定代码会叠加事件监听
• 元素嵌套触发冒泡：页面里的.apply元素可能被嵌套在另一个绑定了点击事件的元素里，点击时事件冒泡触发两次请求
• 后端重复输出：get_data.php里可能存在重复的输出逻辑，导致返回了两次内容

针对性解决办法 #

1. 先排查脚本是否重复引入 #

打开浏览器开发者工具（F12）的网络面板，刷新页面，查看你的JS文件是否被请求了两次。如果是，去掉页面中重复的<script>引入标签即可。

2. 优化事件绑定方式（推荐） #

如果你的.apply元素是动态生成的，或者担心重复绑定，推荐用以下两种方式处理：

方式一：使用事件委托

把事件绑定到固定存在的父元素（比如document或页面初始就有的容器），这样不管元素什么时候生成，都只会绑定一次监听：

$(document).ready(function(){
  // 事件委托：监听document下所有.apply元素的点击
  $(document).on('click', '.apply', function(){
    var idd = this.id;
    var fname = $("#fname").val();
    var company_name = $(".company_name_"+idd).val();
    var phone = $("#phone").val();
    
    $.ajax({
      type:"POST",
      data:{"fname":fname, "company_name":company_name, "phone":phone},
      url:"get_data.php",
      success:function(data){
        $("#search").html(data);
      }
    });
  });
});

另外建议给变量加上var/let/const，避免全局变量污染。

方式二：解绑原有事件再绑定

如果一定要用直接绑定的方式，可以先解绑再绑定，防止重复叠加：

$(document).ready(function(){
  // 先解绑所有.apply的click事件，再重新绑定
  $(".apply").off('click').on('click', function(){
    var idd = this.id;
    var fname = $("#fname").val();
    var company_name = $(".company_name_"+idd).val();
    var phone = $("#phone").val();
    
    $.ajax({
      type:"POST",
      data:{"fname":fname, "company_name":company_name, "phone":phone},
      url:"get_data.php",
      success:function(data){
        $("#search").html(data);
      }
    });
  });
});

3. 阻止事件冒泡 #

如果是元素嵌套导致的事件冒泡触发两次，可以在点击事件里添加阻止冒泡的逻辑：

$(document).ready(function(){
  $(".apply").click(function(event){
    // 阻止事件冒泡到父元素
    event.stopPropagation();
    
    var idd = this.id;
    var fname = $("#fname").val();
    var company_name = $(".company_name_"+idd).val();
    var phone = $("#phone").val();
    
    $.ajax({
      type:"POST",
      data:{"fname":fname, "company_name":company_name, "phone":phone},
      url:"get_data.php",
      success:function(data){
        $("#search").html(data);
      }
    });
  });
});

4. 排查后端输出逻辑 #

你可以在AJAX的success回调里添加console.log(data)，查看返回的内容是否重复。如果是后端返回了两次内容，检查get_data.php里的代码：

• 有没有不小心写了两次echo或输出语句
• 循环逻辑是否错误导致重复输出
• 是否存在重复执行的查询或输出代码

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