如果你的环境只允许使用 JavaScript，没有单独的 HTML 文件，你仍然可以通过 JavaScript 动态创建和插入 div 元素来展示数据。以下是一个示例，演示如何在仅使用 JavaScript 的情况下将数据插入到页面中。
示例代码
// 假设这是你已有的 AJAX 请求部分
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);
// 清空旧的数据（假设你想要在同一个容器内更新）
clearPreviousCustomerInfo();
// 遍历返回的数据并动态创建模块
for (let i = 0; i < dialogData.data.length; i++) {
createCustomerInfoModule(dialogData.data[i]);
}
} else {
console.error('Failed to fetch data:', dialogData.message);
}
},
});
});
// 函数用于清空之前的客户信息
function clearPreviousCustomerInfo() {
const existingContainer = document.getElementById("customerInfoContainer");
if (existingContainer) {
existingContainer.innerHTML = ""; // 清空内容
} else {
// 如果没有该容器，则创建它并添加到文档中
const newContainer = document.createElement("div");
newContainer.id = "customerInfoContainer";
document.body.appendChild(newContainer); // 将新容器添加到 body 中
}
}
// 函数用于创建和添加客户信息模块
function createCustomerInfoModule(data) {
// 创建一个新的 div 模块来展示客户信息
const moduleDiv = document.createElement("div");
moduleDiv.className = "customer-info-module"; // 添加类名以便于样式调整
// 添加内容到模块中（根据需要修改样式和结构）
moduleDiv.innerHTML = `
<h3>${data.name}</h3>
<p>Customer ID: ${data.customerId}</p>
<p>Ident: ${data.ident}</p>
<p>Loan Info Code: ${data.loanInfoCode}</p>
<p>Product Line: ${data.productLine}</p>
<p>Product Name: ${data.productName}</p>
<p>Loan Amount: ${data.loanAmount}</p>
<p>Contract Code: ${data.contractCode}</p>
`;
// 将新创建的模块添加到 container 中
document.getElementById("customerInfoContainer").appendChild(moduleDiv);
}
主要步骤说明：
- AJAX 请求：保持原有的 AJAX 请求逻辑不变。
- 清理现有数据：
- 使用
clearPreviousCustomerInfo函数先检查是否已经存在一个显示客户信息的容器。如果存在则清空里面的内容；如果不存在，则创建一个新的div并将其添加到文档中。
- 使用
- 动态生成模块：
- 在
createCustomerInfoModule函数中，使用document.createElement()方法创建新的<div>元素，并将每条客户信息填充进去，最后将这个模块附加到之前定义好的容器里。
- 在
样式调整：
虽然只能用 JavaScript，但也可以在你的 CSS 文件或 <style> 标签里增加相应的样式，以确保每个 .customer-info-module 看起来整洁。例如：
.customer-info-module {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 15px;
}
这段代码能够使得生成的每个客户信息块具有边框和内外边距，使其更易于区分。
内容由零声教学AI助手提供，问题来源于学员提问
{
debugger
const sourceNode = this.dataInfo.find(
(item) => item.id === info.sourceId
);
if (sourceNode.to.includes(info.targetId)) {
..." />
