本文主要说明json的基本概念，和一个在Html中使用Json给元素赋值的小例子，属于基础性信息
什么是 JSON ？
- JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言 *
- JSON 具有自我描述性，更易理解
* JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
相比 XML 的不同之处
- 没有结束标签
- 更短
- 读写的速度更快
- 能够使用内建的 JavaScript eval() 方法进行解析
- 使用数组
- 不使用保留字
为什么使用 JSON？
对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用
JSON 语法规则
JSON 语法是 JavaScript 对象表示法语法的子集。
- 数据在名称/值对中
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
JSON 值
JSON 值可以是：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中）
- 对象（在花括号中）
- null
JSON 文件
- JSON 文件的文件类型是 ".json"
- JSON 文本的 MIME 类型是 "application/json"
---------------------------------------------------------------------------------------------------------
在Html5中使用Json,将Json中的内容给元素赋值，其中涉及CSS样式，JavaScript脚本。具体如下图所示：
具体不多解释，代码如下：
<!DOCTYPE html> <html> <head> <title>The eightth page</title> <style type="text/css"> #group { width:400px; padding:20px; margin:20px; } input { margin-left: 10px; height: 20px; } div { margin-top: 10px; height: 20px; } .t0 { vertical-align: middle; } input[type="checkbox"] { vertical-align: middle; } input[type="radio"] { vertical-align: middle; } .t { height: 20px; width: 60px; line-height: 20px; display: block; float: left; } </style> <script type="text/javascript"> window.onload = function () { var txt = { "fname": "Alan", "fage": 20, "flove": ["song", "run", "jump"], "fplay": { "basketball": "basketball" }, "fold": true, "fwife": null }; var obj = eval(txt); //给文本框复制 document.getElementById("fname").value = obj.fname; document.getElementById("fage").value = obj.fage; //给复选框复制 var objLove = obj.flove; var objElements = document.getElementsByName("flove"); for (var i = 0; i < objLove.length; i++) { for (var j = 0; j < objElements.length; j++) { if (objLove[i] == objElements[j].value) { objElements[j].checked = "checked"; break; } } } //给单选框复制 var objPlay = obj.fplay; var objPlayElements = document.getElementsByName("fplay"); for (var i = 0; i < objPlayElements.length; i++) { if (objPlayElements[i].value == objPlay.basketball) { objPlayElements[i].checked = "checked"; break; } } //给文本框复制 var old = obj.fold; if (old) { document.getElementById("fold").value = "very old"; } else { document.getElementById("fold").value = "no old"; } if (obj.fwife == null) { document.getElementById("fwife").value = "No wife"; } else { document.getElementById("fwife").value = obj.fwife.ToString(); } } </script> </head> <body> <header> <h1>信息录入</h1> </header> <form name="myForm" id="myForm" action="#" method="post" > <fieldset id="group"> <legend id="group1">Information</legend> <div> <label class="t"> Name:</label> <input type="text" id="fname" /> </div> <div> <label class="t"> Age:</label><input type="number" id="fage" /> </div> <div> <label class="t"> Love:</label> <input type="checkbox" id="chkSong" value="song" name="flove" /> <label class="t0">Song</label> <input type="checkbox" id="chkRun" value="run" name="flove" /> <label class="t0">Run</label> <input type="checkbox" id="chkJum" value="jump" name="flove" /> <label class="t0">Jump</label></div> <div> <label class="t"> Play:</label> <input type="radio" id="rbFball" value="football" name="fplay" /> <label class="t0"> FootBall </label> <input type="radio" id="tbBall" value="basketball" name="fplay" /> <label class="t0">BasketBall</label> </div> <div> <label class="t"> Old:</label> <input type="text" id="fold" /> </div> <div> <label class="t">Wife:</label> <input type="text" id="fwife" /> </div> <div> <label class="t">DateTime:</label> <input type="date" id="fdatetime" value="目前IE11还不支持datetime类型" /> </div> <div> <label class="t">Color:</label> <input type="color" id="fcolor" value="目前IE11还不支持color类型" /> </div> <div> <label class="t">Car:</label> <input type="text" id="Color1" list="cars" /> <datalist id="cars"> <option value="Bus" /> <option value="Jeep" /> <option value="Bench" /> <option value="BaoMa" /> </datalist> </div> <div> <input type="submit" value="Submit" id="fsubmit" /> <input type="reset" value="Reset" id="freset" /> </div> </fieldset> </form> </body> </html>
备注
早春呈水部张十八员外（其一）
【作者】韩愈【朝代】唐
天街小雨润如酥，草色遥看近却无。
最是一年春好处，绝胜烟柳满皇都。
