jQuery Ajax 请求重复触发的解决方案-js教程-PHP中文网

jQuery Ajax 请求重复触发的解决方案

本文详解 jQuery Ajax 调用两次的根本原因及正确处理方式：避免内联 onclick 与 jQuery 事件绑定共存导致的重复执行，推荐统一使用 $(document).ready() 中的事件委托，并移除 HTML 中的 onclick 属性。

本文详解 jquery ajax 调用两次的根本原因及正确处理方式：避免内联 onclick 与 jquery 事件绑定共存导致的重复执行，推荐统一使用 `$(document).ready()` 中的事件委托，并移除 html 中的 `onclick` 属性。

在实际开发中，jQuery Ajax 被意外触发两次是一个常见但易被忽视的问题。其根本原因往往并非 Ajax 本身逻辑有误，而是事件绑定方式冲突所致。例如，当按钮同时存在内联 onclick="Event(1)" 和 jQuery 的 $('#btnSave2').click(...) 绑定时，一次点击会分别触发内联脚本和 jQuery 事件处理器——结果就是 $.ajax() 被执行两次，即使调试器（debugger）在函数入口仅中断一次（因函数确实只被调用一次），但 Ajax 请求却发出两份。

✅ 正确做法是：二选一，且仅保留一种事件绑定机制。推荐完全弃用内联 JavaScript，改用 jQuery 在 DOM 加载完成后统一绑定：

<!-- ✅ 清洁的 HTML：移除 onclick -->
<input type="button" id="btnSave2" value="Save" class="btn btn-primary col-lg-12">

$(document).ready(function () {
  $('#btnSave2').click(function () {
    Event(1);
  });
});

function Event(loop) {
  console.log('Ajax triggered once'); // 可替换为 debugger，便于验证
  $.ajax({
    method: "POST",
    url: "UpEven.aspx",
    data: { slno: EventNo[0] },
    // ⚠️ 强烈建议添加 error 处理，避免静默失败
    error: function (xhr, status, err) {
      console.error('Ajax request failed:', status, err);
    }
  }).done(function (msg) {
    console.log('Success:', msg);
  });
}

? 关键注意事项：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

禁止混用：HTML 中的 onclick 和 jQuery .click() 不应共存，否则必然导致重复调用；
确保 EventNo 已正确定义：若 EventNo[0] 未初始化或为 undefined，虽不影响请求次数，但会导致后端接收异常数据；
避免函数名大小写混淆：原问题中 HTML 调用 Event(1)，而 JS 定义为 event(loop)（小写 e），JS 区分大小写，此错误会导致 ReferenceError —— 实际代码中已修正为 Event（首字母大写），请务必保持一致；
增强健壮性：可添加 e.preventDefault()（对更必要）、禁用按钮防止重复点击、或使用 one() 方法实现一次性绑定（如需严格单次触发）。