本文深入探讨了在 jquery 应用中，由于事件处理程序重复绑定导致的表单重复提交和 ajax 请求问题。通过分析将 `submit` 事件处理程序错误地嵌套在 `click` 事件处理程序内部的常见误区，文章提供了清晰的解决方案：将表单提交逻辑独立绑定，确保其仅在 dom 加载时执行一次。此方法有效避免了不必要的多次数据发送，提升了应用性能和数据准确性。
在现代 Web 开发中，利用 jQuery 进行前端交互，特别是涉及表单提交和 AJAX 请求时，开发者可能会遇到一些意料之外的行为。其中一个常见问题是，当用户多次与某个触发模态框并包含提交按钮的元素交互时，可能导致重复的 AJAX 请求被发送到服务器。这不仅浪费了服务器资源，还可能导致数据处理错误或用户体验下降。
问题根源分析
问题的核心在于 JavaScript 事件处理程序的绑定机制。考虑以下场景：一个按钮（例如“发送全部”）被点击后，会弹出一个确认模态框。模态框内部包含一个表单，该表单有一个提交按钮，用于实际发送数据。如果将表单的 submit 事件处理程序绑定逻辑放置在“发送全部”按钮的 click 事件处理程序内部，就会出现问题。
每次用户点击“发送全部”按钮时，click 事件处理程序都会被触发，进而再次执行内部的 $(‘#sendall_form’).on(“submit”, …) 代码。这意味着，每次点击都会为 sendall_form 元素注册一个新的 submit 事件处理程序，而不会移除之前注册的。结果是，当用户第一次点击“发送全部”并提交表单时，只有一个 AJAX 请求。但如果用户再次点击“发送全部”（即使没有刷新页面），然后再提交表单，此时会有两个（或更多，取决于点击次数）submit 事件处理程序被触发，从而发送多个重复的 AJAX 请求。
解决方案：分离事件绑定逻辑
解决此问题的关键在于将事件处理程序的绑定逻辑进行分离和优化，确保每个事件处理程序只被绑定一次。
“发送全部”按钮的职责：该按钮的主要职责是打开模态框，而不是绑定表单提交事件。表单提交事件的职责：表单的 submit 事件处理程序应在文档加载时绑定一次，负责收集当前选中的数据并发送 AJAX 请求。
以下是优化后的 JavaScript 代码示例：
$(function() { // 复选框全选/取消全选功能 $("#check_all").on("click", function () { // 使用 $(this).prop("checked") 获取当前全选框的状态 var isChecked = $(this).prop("checked"); $("input:checkbox[name='row-check']").prop("checked", isChecked); }); // 单个复选框状态改变时更新全选框状态 $("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; // 如果所有子复选框都被选中，则选中全选框 $("#check_all").prop("checked", allchkbx === ttchkbx); }); // “发送全部”按钮只负责打开模态框 $("#sendall").on('click', function() { $('#sendall_Modal').modal('show'); }); // 表单提交事件处理程序：在DOM加载时绑定一次 $('#sendall_form').on("submit", function(event){ event.preventDefault(); // 阻止表单默认提交行为 // 在提交时收集当前选中的记录ID var array = []; $("input:checkbox[name='row-check']:checked").each(function() { // 确保只收集名为'row-check'的选中复选框 array.push($(this).val()); }); // 如果全选框被选中，也将其值添加到数组中（如果需要） // 假设全选框的值不应被发送，如果需要，则单独处理 if ($("#check_all").prop("checked") && $("#check_all").val() !== undefined) { // array.push($("#check_all").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); // 处理错误情况 } }); });});
关键优化点说明
分离职责：$(“#sendall”).on(‘click’, …) 的唯一任务是显示 sendall_Modal。单次绑定：$(‘#sendall_form’).on(“submit”, …) 被放置在 $(function() { … }); 块中，这意味着它只会在 DOM 加载完成后执行一次，从而确保 submit 事件处理程序只被绑定到表单一次。实时数据收集：选中项 array 的收集逻辑被移到 submit 事件处理程序内部。这样，无论用户在模态框打开前如何更改复选框的选择，每次提交时都会收集到最新的、准确的选中数据。复选框选择的精确性：在收集 array 时，明确指定 $(“input:checkbox[name=’row-check’]:checked”) 以避免意外收集到其他类型的选中输入框（例如 check_all 本身的值，除非它确实需要被发送）。
PHP 后端脚本（sendall.php）
后端 PHP 脚本的逻辑相对独立，它负责接收前端发送的 JSON 格式数据，并根据数据执行相应的数据库操作。在前端问题解决后，PHP 脚本将始终接收到单一且最新的数据数组。
"error", "message" => "No data received or invalid data."]); exit();}// 假设 'on' 是全选框的值，并且我们希望跳过它，只处理实际的ID// 更好的做法是前端只发送需要处理的ID，避免这种特殊处理$ids_to_process = [];foreach ($data as $item) { if ($item !== "on") { // 过滤掉可能存在的'on'值 $ids_to_process[] = (int)$item; // 转换为整数以确保安全 }}if (empty($ids_to_process)) { echo json_encode(["status" => "error", "message" => "No valid IDs to process."]); exit();}foreach($ids_to_process as $d){ // 使用预处理语句防止SQL注入 $query = "SELECT msisdn, message FROM off_texts WHERE id = ?"; if ($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']; // 在这里执行发送短信的逻辑，例如调用短信API // echo "Sending SMS to $phoneno: $textn"; // 示例输出 } mysqli_stmt_close($stmt); } else { // 处理预处理语句失败的情况 error_log("Failed to prepare statement: " . mysqli_error($conn)); }}echo json_encode(["status" => "success", "message" => "Messages processed successfully."]);?>
PHP 脚本注意事项：
安全性：在处理数据库查询时，务必使用预处理语句（mysqli_prepare），以防止 SQL 注入攻击。上述 PHP 代码已更新为使用预处理语句。数据过滤：前端发送的数据应尽可能纯净，只包含实际需要处理的 ID。如果前端可能发送像“on”这样的非 ID 值，后端需要进行适当的过滤。错误处理：增加对 $data 是否为有效数组的检查，并处理数据库操作可能出现的错误。
模态框 HTML 结构
模态框的 HTML 结构保持不变，它提供了一个用户确认的界面，并将提交行为委托给内部的表单。
总结
通过将 jQuery 事件处理程序的绑定逻辑从触发模态框的按钮 click 事件中分离出来，并确保表单的 submit 事件处理程序只在 DOM 加载时绑定一次，可以有效解决重复 AJAX 请求的问题。这种做法不仅遵循了“关注点分离”的良好编程实践，也提高了应用程序的性能、稳定性和数据准确性。在开发交互式 Web 应用时，理解并正确管理事件绑定是至关重要的一环。同时，后端脚本也应采用安全措施，如预处理语句，以确保数据的安全处理。
以上就是优化 jQuery 表单提交：避免重复 AJAX 请求的策略的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1329942.html
微信扫一扫 
支付宝扫一扫 
