本文旨在解决jquery中因事件处理函数绑定不当导致的重复ajax请求问题，尤其是在使用模态框提交表单的场景。核心在于理解事件委托机制，并确保表单的提交事件处理函数只被绑定一次，从而避免每次点击触发按钮时重复注册事件，导致多次数据提交。
在Web开发中，通过ajax异步提交表单数据是常见的交互模式，特别是在结合模态框（Modal）使用时。然而，不正确的事件绑定方式可能导致意外的重复请求，影响应用程序的性能和数据一致性。本文将深入探讨这一问题，并提供一个健壮的解决方案。
问题分析：重复的AJAX请求源头
考虑一个场景：用户从列表中选择多条记录，点击“发送”按钮，弹出一个确认模态框，用户在模态框内点击“确认发送”后，数据通过AJAX发送到后端。如果在这个过程中，前端代码的事件绑定逻辑存在缺陷，就可能出现用户每次点击“发送”按钮时，后续的表单提交会发送多条AJAX请求的现象。
观察以下原始代码片段：
// Check boxes function $(function() { // ... (checkbox selection logic) ... $("#sendall").on('click', function() { var Array = []; $("input:checked").each(function() { array.push($(this).val()); }); // console.log(array); //debug log $('#sendall_Modal').modal('show'); $('#sendall_form').on("submit", function(Event){ // <--- 问题所在 event.preventDefault(); var dbarray = jsON.stringify(array); // console.log(dbarray); $.ajax({ url:"../../bl/office/sendall.php", method:"POST", data:{dbarray:dbarray}, cache:false, success:function(data){ $('#sendall_form')[0].reset(); $('#sendall_Modal').modal('hide'); }, }); }); }); });
上述代码的核心问题在于：$(‘#sendall_form’).on(“submit”, function(event){ … }); 这行代码被放置在了 $(“#sendall”).on(‘click’, function() { … }); 的内部。这意味着，每次用户点击 ID 为 sendall 的按钮时，都会为 sendall_form 表单重新注册一次 submit 事件处理函数。
例如：
- 用户第一次点击 sendall 按钮，sendall_form 的 submit 事件被绑定一次。
- 用户第二次点击 sendall 按钮（即使没有提交模态框），sendall_form 的 submit 事件又被绑定一次。此时，该表单实际上有两个 submit 事件处理函数。
- 当用户最终在模态框内提交 sendall_form 时，这两个处理函数都会被触发，从而导致发送两次 AJAX 请求。
随着用户点击 sendall 按钮的次数增多，绑定的事件处理函数也会随之增加，造成请求数量呈线性增长，这显然不是我们期望的行为。
解决方案：解耦事件绑定
解决这个问题的关键在于确保表单的 submit 事件处理函数只被绑定一次。模态框的“发送”按钮（#sendall）的主要职责应该是显示模态框，而模态框内部表单的提交逻辑（包括数据收集和AJAX请求）应该独立处理。
以下是修正后的javaScript代码：
$(function() { // Check boxes Function (保持不变) $("#check_all").on("click", function () { if ($(this).prop("checked")) { // 修正：使用$(this)来判断当前复选框的状态 $("input:checkbox[name='row-check']").prop("checked", true); } else { $("input:checkbox[name='row-check']").prop("checked", false); } }); $("input:checkbox[name='row-check']").on("change", function () { var allchkbx = $("input:checkbox[name='row-check']").length; var ttchkbx = $("input:checkbox[name='row-check']:checked").length; if (allchkbx === ttchkbx) { $("#check_all").prop("checked", true); } else { $("#check_all").prop("checked", false); } }); // 1. #sendall 按钮的点击事件：仅用于显示模态框 $("#sendall").on('click', function() { // 在这里可以清空或预处理模态框内容，但不要绑定提交事件 $('#sendall_Modal').modal('show'); }); // 2. #sendall_form 表单的提交事件：在页面加载时绑定一次 $('#sendall_form').on("submit", function(event){ event.preventDefault(); // 阻止表单默认提交行为 // 在提交时收集当前选中的数据，确保获取的是最新状态 var array = []; $("input:checkbox[name='row-check']:checked").each(function() { // 只收集name为'row-check'的已选中项 array.push($(this).val()); }); // 排除掉 'check_all' 本身（如果它也被选中且有值的话） // 更好的做法是确保 'check_all' 没有 value 属性或其值不参与业务逻辑 // 或者在收集时明确排除： // var array = []; // $("input:checkbox:checked").not("#check_all").each(function() { // array.push($(this).val()); // }); var dbarray = json.stringify(array); // console.log(dbarray); // 调试日志 $.ajax({ url:"../../bl/office/sendall.php", method:"POST", data:{dbarray:dbarray}, cache:false, success:function(data){ // 成功回调：重置表单并隐藏模态框 $('#sendall_form')[0].reset(); $('#sendall_Modal').modal('hide'); // 可以在这里添加成功消息提示或刷新列表等操作 }, Error: function(jqXHR, textStatus, errorThrown) { // 错误处理 console.error("AJAX error: " + textStatus, errorThrown); alert("发送失败，请稍后再试。"); } }); }); });
修改说明：
-
分离事件处理函数： 将 $(‘#sendall_form’).on(“submit”, …) 从 $(“#sendall”).on(‘click’, …) 中移出，放置在与 $(“#sendall”).on(‘click’, …) 同级的位置，最好是在 $(function() { … }); （即 $(document).ready()）内部直接绑定。这样，submit 事件处理函数只会在页面加载时绑定一次。
-
职责单一化：
- $(“#sendall”).on(‘click’, …) 的职责变得单一：仅用于触发模态框的显示。
- $(‘#sendall_form’).on(“submit”, …) 的职责是处理表单提交逻辑，包括收集数据和发送 AJAX 请求。
-
数据收集时机： 将收集选中项数据的逻辑 (var array = []; $(“input:checked”).each(…)) 移动到 submit 事件处理函数内部。这样可以确保每次提交时，都会获取到用户当前最新的选择状态，而不是在点击 sendall 按钮时固定的旧状态。
-
PHP脚本调整建议： 在PHP脚本中，原始代码对 $data[0] == “on” 的判断可能与前端复选框的 value=”on” 有关。为了更健壮地处理数据，建议前端在 array 中只包含有意义的ID值，并确保 check_all 复选框的 value 不会被意外地作为有效ID发送。例如，可以明确过滤掉 check_all 的值，或者确保 check_all 没有 value 属性。 PHP端可以简化为直接遍历 $data 数组，因为此时 $data 应该只包含有效的ID：
<?php $data = json_decode(stripslashes($_POST['dbarray'])); // 确保 $data 是一个数组 if (is_array($data)) { foreach($data as $d){ // 对每个ID进行sql查询和短信发送操作 // 建议使用预处理语句防止SQL注入 $query = "SELECT msisdn, message FROM off_texts WHERE id = ?"; $stmt = mysqli_prepare($conn, $query); mysqli_stmt_bind_param($stmt, "i", $d); // 'i' 表示整数类型 mysqli_stmt_execute($stmt); $result = mysqli_stmt_get_result($stmt); $rows = mysqli_fetch_assoc($result); if ($rows) { $phoneno = $rows['msisdn']; $text = $rows['message']; // 在这里执行发送短信的逻辑 // 例如：sendSMS($phoneno, $text); echo "Processing ID: $d, Phone: $phoneno, Message: $text<br>"; } else { echo "ID $d not found.<br>"; } mysqli_stmt_close($stmt); } } else { echo "Invalid data received."; } ?>注意： PHP代码中加入了SQL预处理语句的建议，这是防止SQL注入的关键安全措施，在实际开发中务必采纳。
总结与最佳实践
- 事件绑定一次性原则： 除非有特殊需求，否则事件处理函数应在页面加载时绑定一次。避免在另一个事件处理函数内部重复绑定相同的事件。
- 职责分离： 将ui交互（如显示模态框）和业务逻辑（如表单提交和AJAX请求）清晰地分离到不同的事件处理函数中。
- 数据实时性： 在执行业务逻辑（如发送AJAX请求）之前，总是重新收集或验证所需的数据，以确保操作基于最新的用户输入或页面状态。
- 安全性： 在后端处理来自前端的数据时，务必使用参数化查询或预处理语句来防止SQL注入等安全漏洞。
- 错误处理： AJAX请求应包含 error 回调函数，以便在请求失败时能优雅地处理错误并向用户提供反馈。
通过遵循这些最佳实践，可以构建出更健壮、可维护且无意外行为的Web应用程序。