如果你只想使用 JavaScript 来创建和显示多个输入框或模块,并且不涉及任何 HTML 文件的预定义内容,你可以通过 JavaScript 创建 DOM 元素并将它们添加到页面中。下面是如何实现这一目标的示例代码:
dialog.alert(lang('alert'), dialogContent, function() {
var loanCodes = [];
var seen = new Set();
$('input[type=checkbox]:checked').each(function() {
var id = $(this).attr('id');
var value = $(this).val();
if (!seen.has(id)) {
seen.add(id);
loanCodes.push(value);
}
});
$.ajax({
url: `../d/exemptionReduction/selectInforList?loanCodes=${loanCodes}`,
contentType: 'application/json',
type: 'POST',
lang: defLanguage,
async: false,
success: function(res) {
var dialogData = JSON.parse(res);
if (dialogData.success) {
console.log(dialogData);
// 清空之前的数据
const dataContainer = document.createElement('div');
dataContainer.id = 'dataContainer';
document.body.appendChild(dataContainer);
// 遍历返回的数据并生成新的 div
for (let i = 0; i < dialogData.data.length; i++) {
let itemDiv = document.createElement('div');
itemDiv.className = 'data-item';
// 创建所需信息元素并附加到 itemDiv 中
itemDiv.appendChild(createElement('p', `客户姓名: ${dialogData.data[i].name}`));
itemDiv.appendChild(createElement('p', `客户ID: ${dialogData.data[i].customerId}`));
itemDiv.appendChild(createElement('p', `身份证号: ${dialogData.data[i].ident}`));
itemDiv.appendChild(createElement('p', `贷款信息代码: ${dialogData.data[i].loanInfoCode}`));
itemDiv.appendChild(createElement('p', `产品线: ${dialogData.data[i].productLine}`));
itemDiv.appendChild(createElement('p', `产品名称: ${dialogData.data[i].productName}`));
itemDiv.appendChild(createElement('p', `贷款金额: ${dialogData.data[i].loanAmount}`));
// 将新创建的 div 添加到 dataContainer 中
dataContainer.appendChild(itemDiv);
}
} else {
console.error('Failed to fetch data:', dialogData.message);
}
},
});
});
// 辅助函数,用于创建元素
function createElement(tag, text) {
const element = document.createElement(tag);
element.textContent = text;
return element;
}
解释:
- 动态创建
dataContainer
:我们在对话框关闭时动态创建一个名为dataContainer
的<div>
,并将其添加到文档主体中。这可以让你在页面上没有事先定义这个容器。 - 遍历数据以生成模块:对于每条返回的数据,我们创建一个新的
<div>
(itemDiv
),然后为其中需要展示的每个属性(如客户姓名、客户ID 等)调用辅助函数createElement
创建段落 (<p>
) 元素,并将它们添加到对应的父级 div 中。 - 清理旧数据:每次弹出对话框的时候都会清空之前的数据,确保显示的是最新的信息。
这样,你就能完全用 JavaScript 动态地展示从后端获取的多个数据项,而不需要预先存在任何 HTML。
内容由零声教学AI助手提供,问题来源于学员提问