本文深入探讨了在使用jquery处理模态框表单提交时，因事件绑定不当导致重复发送ajax请求的常见问题。通过分析嵌套事件绑定的机制，文章提供了将提交事件处理程序与点击事件解耦的解决方案，并给出了优化后的代码示例，旨在确保每次用户操作只触发一次ajax请求，从而提升应用性能和用户体验。
在Web开发中，我们经常需要处理用户界面事件，例如点击按钮打开模态框，然后在模态框内提交表单。然而，不正确的事件绑定方式可能导致意外的行为，其中最常见的问题之一就是重复发送AJAX请求。本文将详细解析这一问题，并提供一个健壮的解决方案。
问题根源：嵌套事件绑定导致的重复触发
当用户在页面上多次执行某个操作（例如，多次点击一个按钮来打开模态框），如果该操作的事件处理函数内部又绑定了另一个事件处理函数（例如，模态框内表单的提交事件），那么每次外部操作都会导致内部事件处理函数被重复绑定。
考虑以下场景：一个“发送全部”按钮 (#sendall) 用于打开一个确认模态框 (#sendall_Modal)，模态框中有一个表单 (#sendall_form) 用于最终提交。原始代码可能将表单的 submit 事件处理程序放置在“发送全部”按钮的 click 事件处理程序内部：
$("#sendall").on('click', function() {
// ... 其他逻辑，例如收集选中项 ...
$('#sendall_Modal').modal('show');
// 问题所在：每次点击 #sendall 都会重新绑定一次 submit 事件
$('#sendall_form').on("submit", function(event){
event.preventDefault();
// ... AJAX 请求逻辑 ...
});
});在这种结构下，如果用户第一次点击 #sendall，#sendall_form 的 submit 事件会被绑定一次。如果用户关闭模态框，然后再次点击 #sendall，submit 事件又会被绑定一次。此时，#sendall_form 上将有两个相同的 submit 事件处理程序。当用户最终提交表单时，这两个处理程序都会被触发，导致两次AJAX请求被发送。随着点击次数的增加，重复请求的数量也会随之增长。
解决方案：解耦事件绑定并优化数据收集时机
解决此问题的核心在于确保事件处理程序只被绑定一次，并且数据收集逻辑发生在最恰当的时机。
- 解耦事件绑定： 将表单的 submit 事件处理程序从按钮的 click 事件处理程序中分离出来，使其只在DOM加载完成后绑定一次。按钮的 click 事件处理程序应仅负责打开模态框。
- 优化数据收集时机： 收集用户选中项的逻辑 ($("input:checked").each(...)) 应该放在 submit 事件处理程序内部。这样可以确保在用户点击“发送”按钮提交表单时，总是获取到最新的、当前选中的记录，而不是之前点击“发送全部”按钮时的数据。
下面是优化后的JavaScript代码示例：
$(function() {
// 复选框全选/取消全选功能
$("#check_all").on("click", function () {
// 使用 this.checked 属性判断当前全选框的状态更直接
$("input:checkbox[name='row-check']").prop("checked", this.checked);
});
// 单个复选框状态改变时更新全选框
$("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 按钮的点击事件：只负责打开模态框
$("#sendall").on('click', function() {
$('#sendall_Modal').modal('show');
});
// #sendall_form 表单的提交事件：只绑定一次，并在提交时执行AJAX请求
$('#sendall_form').on("submit", function(event){
event.preventDefault(); // 阻止表单默认提交行为
// 在表单提交时才收集当前选中的数据，确保数据是最新的
var array = [];
$("input:checkbox[name='row-check']:checked").each(function() { // 明确只收集 row-check 类型的选中复选框
array.push($(this).val());
});
// 检查是否有数据被选中
if (array.length === 0) {
alert("请至少选择一条记录发送！");
return; // 阻止AJAX请求发送
}
var dbarray = JSON.stringify(array);
$.ajax({
url:"../../bl/office/sendall.php",
method:"POST",
data:{dbarray:dbarray},
cache:false,
success:function(data){
// 成功后重置表单并关闭模态框
$('#sendall_form')[0].reset();
$('#sendall_Modal').modal('hide');
// 可在此处添加页面刷新或数据更新逻辑
// 例如：location.reload();
},
error: function(jqXHR, textStatus, errorThrown) {
console.error("AJAX Error:", textStatus, errorThrown);
alert("发送失败，请稍后再试。");
}
});
});
});代码改进说明：
- $("#sendall").on('click', function() { ... }); 现在只负责显示模态框，不再包含 submit 事件的绑定。
- $('#sendall_form').on("submit", function(event){ ... }); 被移到 $(function() { ... }); 的顶层，确保它在DOM加载后只被绑定一次。
- 数据收集 (var array = []; $("input:checkbox[name='row-check']:checked").each(...)) 逻辑被放置在 submit 事件处理程序内部。这意味着每次表单提交时，都会重新获取当前页面上所有被选中的复选框的值，保证了数据的实时性。
- 添加了对 array.length 的检查，如果用户没有选择任何记录就点击发送，会给出提示并阻止AJAX请求，提升用户体验。
- 在 success 回调中，可以根据需要添加页面刷新或其他UI更新逻辑。
- 增加了 error 回调处理，以便在AJAX请求失败时提供反馈。
后端PHP脚本的适配
对于后端PHP脚本 sendall.php，它负责接收前端发送的JSON数据并进行处理。由于前端现在发送的是经过 JSON.stringify 编码的数组，后端需要使用 json_decode 和 stripslashes 来正确解析数据。
'error', 'message' => 'No data received or invalid format.']);
exit();
}
// 遍历并处理每个ID
foreach ($data as $d) {
// 确保 $d 是一个合法的整数，防止SQL注入
$id = (int)$d;
// 构建查询语句，使用预处理语句防止SQL注入
$query = "SELECT msisdn, message FROM off_texts WHERE id = ?";
$stmt = mysqli_prepare($conn, $query);
if ($stmt) {
mysqli_stmt_bind_param($stmt, "i", $id); // 绑定整数参数
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
if ($rows = mysqli_fetch_assoc($result)) {
$phoneno = $rows['msisdn'];
$text = $rows['message'];
// 在这里执行发送短信的逻辑
// 例如：send_sms($phoneno, $text);
// 为了示例，我们只打印
// echo "Sending SMS to " . $phoneno . ": " . $text . "\n";
}
mysqli_stmt_close($stmt);
} else {
// 处理预处理语句失败的情况
// error_log("Failed to prepare statement: " . mysqli_error($conn));
}
}
// 返回成功响应
echo json_encode(['status' => 'success', 'message' => 'Messages processed successfully.']);
?>PHP脚本改进说明：
- 移除了 if ($data[0] == "on") 的逻辑，因为前端现在只发送选中的消息ID，并且复选框的值通常是ID，而不是“on”。
- 增加了对 $data 是否为有效数组的检查。
- 强调了使用预处理语句 (mysqli_prepare, mysqli_stmt_bind_param, mysqli_stmt_execute) 来防止SQL注入攻击，这在处理用户输入数据时至关重要。
- 在循环内部，可以放置实际的短信发送逻辑。
- 最终返回一个JSON格式的成功或失败响应，以便前端可以根据此响应进行进一步处理。
总结
通过将事件处理程序的绑定与业务逻辑解耦，并确保数据在操作执行的最后一刻才被收集，我们成功解决了因重复事件绑定导致的AJAX请求重复发送问题。这种模式不仅提升了应用的性能和稳定性，也使得代码结构更加清晰，易于维护。在开发过程中，始终关注事件绑定的生命周期和数据流向，是构建健壮Web应用的关键。
