ネストされた JSON データは自動的に HTML Web ページに書き戻されます_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:43:51

オリジナル

1430 人が閲覧しました

この記事では、MongoDB データベースから JSON ネストされた文字列を解析し、HTML インターフェイス要素のカスタム属性に従ってデータコンテンツを表示するためのソリューションと技術的な実装コードを紹介します。

HTML Web ページの定義

注、フォーム定義ルールは次のとおりです:
(1) Label を使用してページデータをエコーします。
(2) label で、属性「fieldid」をカスタマイズします (テーブルの場合)。カスタム属性は "subid" です。 (3) テーブル

の要素に、テーブルの列数を属性値とするカスタム属性 subtable を追加します。
ページを設計する場合、複数行のサブフォームの定義は次のルールに従って設計する必要があります:

ヘッダー行が必要です。

データの行が事前に定義されている必要があります。

JavaScript コード

<html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><head></head><body><h1>表单展示数据回写测试 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>

ログイン後にコピー

JSON データの内容と形式は以下のとおりです:

<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 データは MongoDB データベースから Webservice 経由で取り出した BSON データです。データ内の「キーと値」ペアの「キー」は、HTML Web ページのラベルのカスタム属性「fieldid」または「subid」に対応します。

以下のシーケンス図は、JSON データの処理原理を簡潔に示しています。このうち、MongoDB データベースを読み取る処理と内容は省略されています。

Raphaël 2.1.2 で作成ブラウザブラウザ HTML ページ HTML ページ JS 関数 JS 関数 MongoDB MongoDB JSON オブジェクト JSON オブジェクト設計ページ、カスタム属性 () JSON データの取得 () BSON データの読み取り () HTML インターフェイス要素のトラバース () ) 解析 ( 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 標準モード。

参考:

Web フォームのドキュメント設計と技術実装 Xiao Yongwei 2015.5
JavaScript による HTML フォーム要素とフォーム定義のトラバース Xiao Yongwei 2015.5
W3School が提供するコンテンツ: http://www.w3school.com.cn/jsref/dom_obj_document.asp
Microsoft 提供: JSON.parse 関数 (JavaScript)