要将返回的多个名称和其他数据展示在单独的 div
中,并且每个返回的数据都展示为一个模块,你可以按照以下步骤进行修改。我们假设你想要把这些数据放入一个名为 dataContainer
的 div
中,每个数据项用一个子 div
来展示。
首先,确保你的 HTML 中有一个用于显示数据的容器,例如:
<div id="dataContainer"></div>
接下来,你可以修改你的 JavaScript 代码,将数据渲染到这个容器中,而不是仅更新输入框。这里是你需要做的更改:
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);
// 清空之前的数据
$('#dataContainer').empty();
// 遍历返回的数据并生成新的 div
for (let i = 0; i < dialogData.data.length; i++) {
let itemDiv = $('<div class="data-item"></div>');
// 假设你需要添加名字和其他属性
itemDiv.append(`<p>客户姓名: ${dialogData.data[i].name}</p>`);
itemDiv.append(`<p>客户ID: ${dialogData.data[i].customerId}</p>`);
itemDiv.append(`<p>身份证号: ${dialogData.data[i].ident}</p>`);
itemDiv.append(`<p>贷款信息代码: ${dialogData.data[i].loanInfoCode}</p>`);
itemDiv.append(`<p>产品线: ${dialogData.data[i].productLine}</p>`);
itemDiv.append(`<p>产品名称: ${dialogData.data[i].productName}</p>`);
itemDiv.append(`<p>贷款金额: ${dialogData.data[i].loanAmount}</p>`);
// 将新创建的 div 添加到 dataContainer 中
$('#dataContainer').append(itemDiv);
}
} else {
console.error('Failed to fetch data:', dialogData.message);
}
},
});
});
解释:
- 清空之前的数据:在请求成功后,首先清空
#dataContainer
中可能存在的任何内容。 - 动态生成新的 div:遍历返回的数据,为每一条记录创建一个新的
<div>
,并用.append()
方法将所需的信息添加进去。 - 将模块添加到容器:最后,将生成的新模块(每条记录)添加到
#dataContainer
内。
通过这种方式,你就可以在页面上展示多个客户信息,每个客户信息占据一个独立的模块,无需修改原始 HTML,只使用 JavaScript 动态生成内容。
内容由零声教学AI助手提供,问题来源于学员提问