ZBLOG

没有html只有js

如果你只想使用 JavaScript 来创建和显示多个输入框或模块,并且不涉及任何 HTML 文件的预定义内容,你可以通过 JavaScript 创建 DOM 元素并将它们添加到页面中。下面是如何实现这一目标的示例代码:

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);

                // 清空之前的数据
                const dataContainer = document.createElement('div');
                dataContainer.id = 'dataContainer';
                document.body.appendChild(dataContainer);

                // 遍历返回的数据并生成新的 div
                for (let i = 0; i < dialogData.data.length; i++) {
                    let itemDiv = document.createElement('div');
                    itemDiv.className = 'data-item';

                    // 创建所需信息元素并附加到 itemDiv 中
                    itemDiv.appendChild(createElement('p', `客户姓名: ${dialogData.data[i].name}`));
                    itemDiv.appendChild(createElement('p', `客户ID: ${dialogData.data[i].customerId}`));
                    itemDiv.appendChild(createElement('p', `身份证号: ${dialogData.data[i].ident}`));
                    itemDiv.appendChild(createElement('p', `贷款信息代码: ${dialogData.data[i].loanInfoCode}`));
                    itemDiv.appendChild(createElement('p', `产品线: ${dialogData.data[i].productLine}`));
                    itemDiv.appendChild(createElement('p', `产品名称: ${dialogData.data[i].productName}`));
                    itemDiv.appendChild(createElement('p', `贷款金额: ${dialogData.data[i].loanAmount}`));

                    // 将新创建的 div 添加到 dataContainer 中
                    dataContainer.appendChild(itemDiv);
                }
            } else {
                console.error('Failed to fetch data:', dialogData.message);
            }
        },
    });
});

// 辅助函数,用于创建元素
function createElement(tag, text) {
    const element = document.createElement(tag);
    element.textContent = text;
    return element;
}

解释:

  1. 动态创建dataContainer:我们在对话框关闭时动态创建一个名为 dataContainer<div>,并将其添加到文档主体中。这可以让你在页面上没有事先定义这个容器。
  2. 遍历数据以生成模块:对于每条返回的数据,我们创建一个新的 <div>itemDiv),然后为其中需要展示的每个属性(如客户姓名、客户ID 等)调用辅助函数 createElement 创建段落 (<p>) 元素,并将它们添加到对应的父级 div 中。
  3. 清理旧数据:每次弹出对话框的时候都会清空之前的数据,确保显示的是最新的信息。

这样,你就能完全用 JavaScript 动态地展示从后端获取的多个数据项,而不需要预先存在任何 HTML。


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

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

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

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

联系我们

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

微信号:3007537140

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

关注我们
x

注册

已经有帐号?