ZBLOG

没有html只有js

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

  1. dialog.alert(lang('alert'), dialogContent, function() {
  2. var loanCodes = [];
  3. var seen = new Set();
  4. $('input[type=checkbox]:checked').each(function() {
  5. var id = $(this).attr('id');
  6. var value = $(this).val();
  7. if (!seen.has(id)) {
  8. seen.add(id);
  9. loanCodes.push(value);
  10. }
  11. });
  12. $.ajax({
  13. url: `../d/exemptionReduction/selectInforList?loanCodes=${loanCodes}`,
  14. contentType: 'application/json',
  15. type: 'POST',
  16. lang: defLanguage,
  17. async: false,
  18. success: function(res) {
  19. var dialogData = JSON.parse(res);
  20. if (dialogData.success) {
  21. console.log(dialogData);
  22. // 清空之前的数据
  23. const dataContainer = document.createElement('div');
  24. dataContainer.id = 'dataContainer';
  25. document.body.appendChild(dataContainer);
  26. // 遍历返回的数据并生成新的 div
  27. for (let i = 0; i < dialogData.data.length; i++) {
  28. let itemDiv = document.createElement('div');
  29. itemDiv.className = 'data-item';
  30. // 创建所需信息元素并附加到 itemDiv 中
  31. itemDiv.appendChild(createElement('p', `客户姓名: ${dialogData.data[i].name}`));
  32. itemDiv.appendChild(createElement('p', `客户ID: ${dialogData.data[i].customerId}`));
  33. itemDiv.appendChild(createElement('p', `身份证号: ${dialogData.data[i].ident}`));
  34. itemDiv.appendChild(createElement('p', `贷款信息代码: ${dialogData.data[i].loanInfoCode}`));
  35. itemDiv.appendChild(createElement('p', `产品线: ${dialogData.data[i].productLine}`));
  36. itemDiv.appendChild(createElement('p', `产品名称: ${dialogData.data[i].productName}`));
  37. itemDiv.appendChild(createElement('p', `贷款金额: ${dialogData.data[i].loanAmount}`));
  38. // 将新创建的 div 添加到 dataContainer 中
  39. dataContainer.appendChild(itemDiv);
  40. }
  41. } else {
  42. console.error('Failed to fetch data:', dialogData.message);
  43. }
  44. },
  45. });
  46. });
  47. // 辅助函数,用于创建元素
  48. function createElement(tag, text) {
  49. const element = document.createElement(tag);
  50. element.textContent = text;
  51. return element;
  52. }

解释:

  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

注册

已经有帐号?