本文介绍在确认预约请求后，无需页面刷新即可同步更新“待处理预约”“已确认预约”和“历史预约”三张表格的完整实现方案，重点解决多 ajax 请求的时序控制与错误处理问题。
本文介绍在确认预约请求后，无需页面刷新即可同步更新“待处理预约”“已确认预约”和“历史预约”三张表格的完整实现方案，重点解决多 ajax 请求的时序控制与错误处理问题。
在构建实时性要求较高的预约管理系统时，单次用户操作（如点击“Confirm”按钮）往往需要联动更新多个数据视图。原始代码中三个 $.ajax 请求是并行发起的，虽能独立运行，但存在明显隐患：缺乏执行顺序保障、无错误传递机制、失败后状态不一致——例如，若第一个请求成功删除了待处理记录，而第二个请求因网络异常失败，“已确认预约”表格将不会更新，导致数据视图与数据库状态严重脱节。
为确保强一致性，应采用链式串行调用，并利用 jQuery 的 done() 方法实现请求依赖。以下是优化后的 load_data() 函数：
function load_data(query) {
const id = $('#personel_id').val(); // 使用 jQuery 获取更简洁
// 串行执行：仅当前一步成功，才触发下一步
$.ajax({
url: "includes/crm-clients-details-requests-load.php",
method: "POST",
data: { query, id }
})
.done(function(data) {
$('#result-requests').html(data);
// 第二步：加载已确认预约
return $.ajax({
url: "includes/crm-clients-details-confirmed-load.php",
method: "POST",
data: { query, id }
});
})
.done(function(data) {
$('#result-confirmed').html(data);
// 第三步：加载历史预约（可选，保持一致性）
return $.ajax({
url: "includes/crm-clients-details-past-load.php",
method: "POST",
data: { query, id }
});
})
.done(function(data) {
$('#result-past').html(data);
console.log("✅ 所有表格已同步刷新完成");
})
.fail(function(xhr, status, error) {
// 统一错误处理：提示用户并保留当前状态
alert(`数据加载失败：${status} - ${error}`);
console.error("AJAX 请求失败", xhr);
});
}
✅ 关键改进说明：
基于jQuery的AJAX和JSON的实例 中文WORD版
下载
本文档主要讲述的是基于jQuery的AJAX和JSON的实例；过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。有需要的朋友可以下载看看
- 使用 .done() 链式调用替代并行请求，天然保证执行顺序；
- 每个 .done() 中 return $.ajax(...) 将新 Promise 传入下一级，形成可中断的依赖流；
- 统一的 .fail() 捕获任意环节错误，避免部分更新导致界面混乱；
- 移除冗余的 document.getElementById，改用 $('#personel_id').val() 提升可读性与健壮性。
⚠️ 注意事项：
- 若三张表数据量较大或服务器响应较慢，可考虑添加加载状态提示（如禁用按钮 + loading... 文案），防止重复提交；
- 生产环境建议增加防抖（debounce）逻辑，避免高频调用；
- 更进一步的方案是后端聚合接口（如 /api/load-all-tables），一次请求返回全部数据，减少 HTTP 开销与网络延迟风险。
通过以上重构，用户点击“Confirm”后，系统将原子化地完成三张表格的同步刷新，真正实现零刷新、强一致、高可用的前端体验。
