如果你想在 JavaScript 中动态创建 HTML 输入框并将其值设置为从 AJAX 请求中获取的数据,你可以按照以下步骤进行。
- 动态生成输入框。
- 将 AJAX 请求的结果插入到这些输入框中。
下面是一个示例代码,展示了如何将 setValue
方法替换为创建 HTML <input>
元素并设置其值:
$.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);
// 清空之前的内容(如果需要)
document.getElementById("inputContainer").innerHTML = "";
for (let i = 0; i < dialogData.data.length; i++) {
// 创建输入框并添加到页面中
createInput('customerName', dialogData.data[i].name);
createInput('customerCode', dialogData.data[i].customerId);
createInput('idents', dialogData.data[i].ident);
createInput('loanCode', dialogData.data[i].loanInfoCode);
createInput('productCode', dialogData.data[i].productLine);
createInput('productGroup', dialogData.data[i].productName);
createInput('loanAmount', dialogData.data[i].loanAmount);
createInput('contractCode', dialogData.data[i].contractCode);
createInput('overduePrincipal', dialogData.data[i].overduePrincipal);
createInput('overdueDay', dialogData.data[i].DPD);
createInput('totalRemainingAmount', dialogData.data[i].totalRemainingAmount);
createInput('interestPayable', dialogData.data[i].interestPayable);
createInput('interestPenalty', dialogData.data[i].interestPenalty);
createInput('committedRepaymentAmount', dialogData.data[i].committedRepaymentAmount);
}
} else {
console.error('Failed to fetch data:', dialogData.message);
}
},
});
// 函数来创建输入框
function createInput(name, value) {
const inputContainer = document.getElementById("inputContainer");
// 创建输入元素
const input = document.createElement("input");
input.type = "text";
input.name = name;
input.value = value;
// 将输入元素添加到容器中
inputContainer.appendChild(input);
// 可选:添加标签以便用户识别
const label = document.createElement("label");
label.textContent = name;
inputContainer.appendChild(label); // 添加标签在输入前面
}
在你的 HTML 文件中需要有一个容器
确保你的 HTML 中有一个用于放置这些动态生成的输入框的容器。例如:
<div id="inputContainer"></div>
总结
这样,在调用 AJAX 成功后,你会根据返回的数据动态创建多个 <input>
元素,并将相应的值设置进去。每个字段都有对应的名称和初始值。这种方法允许你完全通过 JavaScript 来处理 UI 而不依赖于静态 HTML 文件。
内容由零声教学AI助手提供,问题来源于学员提问