嵌套JSON数据自动回写HTML网页_html/css_WEB-ITnose
本文介绍解析来自MongoDB数据库的JSON嵌套字符串，按HTML界面元素自定义属性展现数据内容的解决方案及技术实现代码。
HTML网页定义<html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><head></head><body><h1 id="表单展示数据回写测试-JavaScript">表单展示数据回写测试 JavaScript</h1><p id="demo" >这是表单数据解析示例.</p><div> <label >名称：</label><label fieldid="name"></label><br>通过自定义属性“fieldtype”来定义数据类型。<br><br><button id="test" type="button" onclick="showAllElem()">测试展示表单数据</button><br><br><label>标题：</label><label fieldid="title"></label><br><label >年龄：</label><label fildid="old"></label><br>多行子表单，字段属性定义为“subid”，表单按数据字段属性定义，标识出含有子表，属性为“subtable”单独定义列数，其他不变。<table id="dynamictable" fieldid="subdatas" subtable="3" border="1" cellspacing="0" width="400"><tr><td>数据名称</td><td>数据类型</td><td>数值</td></tr><tr><td><label subid="fieldid"></label></td><td><label subid="fieldtype"></label></td><td><label subid="fieldvalue"></label></td></tr></table><br><label >结束标志：</label><label fieldid="flag"></label><br></div> </body></html>
注，表单定义规则如下：
（1） 使用Label回显页面数据；
（2） 在label中，自定义属性“fieldid”，如果是表（table），则区别自定义属性为“subid”；
（3） 在表〈table〉的元素中，增加自定义属性subtable，其属性值为表格的列数。
在设计页面时，多行子表单的定义，必须按规则设计，要求如下：
<script>//表单增加插入一行function insertRow(){ var dytb_id = 'dynamictable'; var dy_row_num = document.getElementById(dytb_id).rows.length; //取table中第二行单元格集合 var dy_row = document.getElementById(dytb_id).rows[1].cells; //在table末尾，追加一行 var dytb=document.getElementById(dytb_id).insertRow(dy_row_num); for (i = 0;i<dy_row.length; i++){ var dy_td = dytb.insertCell(i); dy_td.innerHTML = dy_row[i].innerHTML; } }//显示所有回写数据function showAllElem(){ var elems = document.getElementsByTagName("*"); //遍历所有元素 var ret_json = ""; //定义返回JSON数据字符串 var m = 0; //JSON嵌套子文档起点 var subcolumns = 0; //多行表单列数 var subrows = 0; //多行表单数据行数 var row_num = 0; //数据行数 ret_json = "{\"name\":\"测试JSON\",\"title\":\"测试标题\",\"subtable\":[{\"fieldid\":\"数据名称a\",\"fieldtype\":\"string\"},{\"fieldid\":\"数据名称b\",\"fieldtype\":\"number\"},{\"fieldid\":\"数据名称c\",\"fieldtype\":\"datetime\"}],\"flag\":\"测试结束！\"}"; //将 JavaScript 对象表示法 (JSON) 字符串转换为对象。 json_obj = JSON.parse(ret_json); for(var i=0;i<elems.length;i++){ if (elems[i].hasAttribute("fieldid") && !(elems[i].hasAttribute("subtable"))){ //按键值获取对象的值 var tmp_key = elems[i].getAttribute("fieldid"); alert(tmp_key); elems[i].innerText = json_obj[tmp_key]; //n++; }else{ if (elems[i].hasAttribute("subtable")){ subcolumns = elems[i].getAttribute("subtable"); var tbl_id = elems[i].id; //取表单数据行数 subrows = document.getElementById(tbl_id).rows.length - 1; //按规则取多行子表单数据 var json_obj_dim = json_obj["subtable"]; for (var j=subrows;j<json_obj_dim.length;j++){ insertRow(); } m = 0; }else{ if (elems[i].hasAttribute("subid") && (m < subcolumns)){ var tmp_key = elems[i].getAttribute("subid"); alert(tmp_key); elems[i].innerText = json_obj_dim[row_num][tmp_key]; m++; }else{ if (elems[i].hasAttribute("subid")){ //多行子表单数据换行 row_num++; var tmp_key = elems[i].getAttribute("subid"); alert(tmp_key); elems[i].innerText = json_obj_dim[row_num][tmp_key]; m = 1; } } } } } }</script>其中JSON数据内容及格式如下所示：
{"name":"测试JSON","title":"测试标题","subtable":[ {"fieldid":"数据名称a","fieldtype":"string"}, {"fieldid":"数据名称b","fieldtype":"number"}, {"fieldid":"数据名称c","fieldtype":"datetime"} ],"flag":"测试结束！"}"按系统设计，此JSON数据是通过Webservice，从MongoDB数据库取出来的BSON数据。数据中“键-值”对的“键（key）”与HTML网页上lable的自定义属性“fieldid”或“subid”所对应。
如下序列图为处理JSON数据展现的简明原理，其中，略去读取MongoDB数据库的过程及内容。
Created with Raphaël 2.1.2 浏览器 浏览器 HTML页面 HTML页面 JS函数 JS函数 MongoDB MongoDB JSON对象 JSON对象 设计页面，自定义属性（） 获取JSON数据（） 读取BSON数据（） 遍历HTML界面元素（） parse（JSON字符串） 按界面元素键值获取JSON对象的值（）
注：关于JSON在以下文档模式中受到支持：Internet Explorer 8 标准模式、Internet Explorer 9 标准模式、Internet Explorer 10 标准模式、Internet Explorer 11 标准模式。此外，也在应用商店应用（Windows 8 和 Windows Phone 8.1）中受支持。
在以下文档模式中不受支持：Quirks、Internet Explorer 6 标准模式、Internet Explorer 7 标准模式。
参考：
网页表单文档设计及技术实现 肖永威 2015.5
avaScript遍历HTML表单元素及表单定义 肖永威 2015.5
W3School 提供内容：http://www.w3school.com.cn/jsref/dom_obj_document.asp
微软所提供：JSON.parse 函数 (JavaScript)
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1382
52
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?
Mar 20, 2025 pm 05:56 PM
In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.
Ist HTML für Anfänger leicht zu lernen?
Apr 07, 2025 am 12:11 AM
HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
Was ist ein Beispiel für ein Start -Tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.
