如果你想在 JavaScript 中动态创建 HTML 输入框,并将其值设置为 AJAX 请求中获取的数据,可以直接在 AJAX 的 success
回调函数中完成所有的工作。以下是如何实现这个功能的示例代码:
$.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 inputContainer = document.createElement("div");
document.body.appendChild(inputContainer); // 将容器添加到文档中
for (let i = 0; i < dialogData.data.length; i++) {
// 创建并设置每个输入框
createInput('customerName', dialogData.data[i].name, inputContainer);
createInput('customerCode', dialogData.data[i].customerId, inputContainer);
createInput('idents', dialogData.data[i].ident, inputContainer);
createInput('loanCode', dialogData.data[i].loanInfoCode, inputContainer);
createInput('productCode', dialogData.data[i].productLine, inputContainer);
createInput('productGroup', dialogData.data[i].productName, inputContainer);
createInput('loanAmount', dialogData.data[i].loanAmount, inputContainer);
createInput('contractCode', dialogData.data[i].contractCode, inputContainer);
createInput('overduePrincipal', dialogData.data[i].overduePrincipal, inputContainer);
createInput('overdueDay', dialogData.data[i].DPD, inputContainer);
createInput('totalRemainingAmount', dialogData.data[i].totalRemainingAmount, inputContainer);
createInput('interestPayable', dialogData.data[i].interestPayable, inputContainer);
createInput('interestPenalty', dialogData.data[i].interestPenalty, inputContainer);
createInput('committedRepaymentAmount', dialogData.data[i].committedRepaymentAmount, inputContainer);
}
} else {
console.error('Failed to fetch data:', dialogData.message);
}
},
});
// 函数来创建输入框
function createInput(name, value, container) {
// 创建标签和输入元素
const label = document.createElement("label");
label.textContent = name;
const input = document.createElement("input");
input.type = "text";
input.name = name;
input.value = value;
// 将标签和输入元素添加到指定容器中
container.appendChild(label); // 添加标签
container.appendChild(input); // 添加输入框
}
代码解释:
- AJAX请求:通过
$.ajax
向服务器发送请求,获取数据。 - 成功回调:在成功的回调中,首先解析返回的数据,然后检查是否成功。
- 动态创建容器:使用
document.createElement
方法动态创建一个<div>
容器,用于存放所有生成的输入框。 - 循环遍历数据:使用一个循环遍历从 AJAX 响应中获取的数据,并调用
createInput
函数生成相应数量的输入框和标签。 - createInput 函数:该函数接收参数
name
、value
和目标容器,在目标容器中创建一个<label>
和一个<input>
元素,并将它们添加到页面上。
注意事项:
- 确保你的页面已经引入了 jQuery 库。
- 由于此示例将所有元素插入到
document.body
,你可以根据需要更改以适合你的页面结构。
内容由零声教学AI助手提供,问题来源于学员提问