
本文讲解如何在 javascript 中基于 ajax 返回的动态数组,安全高效地构建 html 表格字符串,并嵌入 sweetalert 弹窗中,避免语法错误,支持任意长度数据。
在前端开发中,常需将异步获取的 JSON 数据(如数据库查询结果)渲染为 HTML 表格,并展示在模态弹窗(如 SweetAlert)中。但直接在 Swal.fire({ html: ‘…’ }) 的模板字符串内写循环语句(如 for)会导致语法错误——因为模板字符串中不支持执行语句,只支持表达式插值。
✅ 正确做法是:先在 success 回调中预处理数据,生成完整的
以下为推荐实现(已优化安全性与可读性):
$.ajax({
url: "../model/test.php",
data: {
'order-startDate': startDate,
'order-endDate': endDate,
'order-custId': custId
},
type: 'GET',
success: function(result) {
let data;
try {
data = JSON.parse(result);
} catch (e) {
console.error("JSON 解析失败:", e);
Swal.fire("错误", "服务器返回数据格式异常", "error");
return;
}
// ✅ 使用 map 构建每行 HTML,自动处理空数组情况
const tableRows = data.length > 0
? data.map(item =>
`
${escapeHtml(item.item || '')}
${escapeHtml(item.count || '')}
`
).join('')
: '暂无数据 ';
// 渲染 SweetAlert 弹窗
Swal.fire({
html: `
${escapeHtml(custId)}
立即学习“前端免费学习笔记(深入)”;
${escapeHtml(startDate)} ${escapeHtml(endDate)}
? 关键要点总结:
- ❌ 禁止在模板字符串中写 for、if 等语句;✅ 改用 map() + join() 预生成 HTML 片段;
- ⚠️ 始终对 JSON.parse() 加 try…catch,避免解析失败导致脚本中断;
- ?️ 对所有来自服务端的字段(如 item、count、custId)使用 escapeHtml() 转义,防范 XSS;
- ? 若数据为空,主动渲染
lspan=”2″>暂无数据 ,提升用户体验;
- ? SweetAlert 支持 width 和 customClass,便于响应式表格布局。
该方案简洁、健壮、可维护,适用于任意两列(或多列)结构的动态表格场景。
