ZBLOG

$.ajax({ url: `../d/exemptionReduction/selectInforList?loanCodes=${loanCodes}`, contentType: 'application/json', type: 'POST', lang: defLanguage, async: false, success: function(res) { ...

如果你想在 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);   // 添加输入框
}

代码解释:

  1. AJAX请求:通过 $.ajax 向服务器发送请求,获取数据。
  2. 成功回调:在成功的回调中,首先解析返回的数据,然后检查是否成功。
  3. 动态创建容器:使用 document.createElement 方法动态创建一个 <div> 容器,用于存放所有生成的输入框。
  4. 循环遍历数据:使用一个循环遍历从 AJAX 响应中获取的数据,并调用 createInput 函数生成相应数量的输入框和标签。
  5. createInput 函数:该函数接收参数 namevalue 和目标容器,在目标容器中创建一个 <label> 和一个 <input> 元素,并将它们添加到页面上。

注意事项:

  • 确保你的页面已经引入了 jQuery 库。
  • 由于此示例将所有元素插入到 document.body,你可以根据需要更改以适合你的页面结构。


    内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=20610

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?