本文详解如何通过 jquery 的 `$.get()` 正确异步加载外部页面内容，并将其注入基于 jquery ui 的模态确认对话框，避免因异步执行时机不当导致内容未更新的常见错误。
在 Web 开发中，常需在用户执行关键操作（如提交表单、删除记录）前弹出确认对话框，并动态展示来自服务端的上下文信息（例如待确认的地址、订单摘要等）。但初学者易陷入一个典型误区：在异步请求（如 $.get）外部直接使用其返回数据——由于 AJAX 请求是异步的，后续代码会立即执行，而回调函数中的赋值尚未发生，导致变量仍为初始值。
你原始代码的问题核心在于：
var text = "Test";
$.get("confirmaddress.html", function(data) {
text = data; // ✅ 回调内赋值成功
});
// ❌ 此时 text 仍是 "Test" —— $.get 还没完成！
// 后续 dialog 创建逻辑却依赖这个未更新的 text✅ 正确做法是：将依赖外部内容的所有逻辑（包括 DOM 构建与对话框初始化）全部移入 $.get 的成功回调中，确保数据就绪后再执行。
以下是优化后的完整可运行方案（兼容 jQuery + jQuery UI）：
立即学习“Java免费学习笔记（深入）”；
<!-- 引入必要资源 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
function ConfirmDialog(message) {
// 异步获取外部内容，并在数据就绪后构建并显示对话框
$.get("confirmaddress.html")
.done(function(data) {
// ✅ data 已成功加载，可安全使用
$("<div></div>")
.appendTo("body")
.html(`<div><h6>${message}?</h6></div>`)
.append(data) // 直接追加 HTML 内容（确保 confirmaddress.html 返回纯 HTML 片段）
.dialog({
modal: true,
title: "Address Confirmation",
zIndex: 10000,
autoOpen: true,
width: "auto",
resizable: false,
buttons: {
"Yes": function() {
$("body").append("<h1>Confirm Dialog Result: <i>Yes</i></h1>");
$(this).dialog("close");
},
"No": function() {
$("body").append("<h1>Confirm Dialog Result: <i>No</i></h1>");
$(this).dialog("close");
}
},
close: function() {
$(this).remove(); // 清理 DOM，防止重复插入
}
});
})
.fail(function(xhr, status, error) {
// ❗ 处理加载失败（如文件不存在、网络错误）
alert(`Failed to load confirmation content: ${status} - ${error}`);
// 可选：降级显示默认提示
$("<div></div>")
.appendTo("body")
.html(`<div><h6>${message}?</h6><p><em>Content unavailable. Proceed with caution.</em></p></div>`)
.dialog({ /* 同上配置 */ });
});
}
</script>关键要点说明：
- 绝不依赖全局变量传递异步数据：避免 text = data 后在回调外使用，这是最常见陷阱。
- 逻辑收口到 .done() 回调中：所有依赖 data 的操作（HTML 拼接、.dialog() 初始化）必须在此内部执行。
- 务必添加 .fail() 错误处理：生产环境必须应对网络异常或 404，提供友好降级方案。
- 注意 HTML 安全性：若 confirmaddress.html 内容不可信，建议先用 $.text() 或服务端渲染纯文本，避免 XSS 风险；若需保留 HTML，确保来源可信且已做服务端过滤。
- jQuery UI 版本兼容性：示例使用 jQuery 3.3.1 + jQuery UI 1.12.1，若升级至 jQuery 4.x，请注意 .load() 已废弃，$.get() 是更现代的选择。
通过此方案，你的确认对话框即可稳定、安全地集成动态外部内容，同时保持代码清晰、健壮且符合前端最佳实践。
