图片 1

不在手把手教您怎么用

By admin in web前端 on 2019年5月6日

本文主要说明Json的基本概念,和一个在Html中使用Json给元素赋值的小例子,属于基础性信息

     
 JSON也许你在用,或者你已经用很久了,但是你不一定知道他到底是什么,那么就来好好了解一下吧,不管你是
在安卓开发用到的还是在web开发用到的(好像web开发用到的才是json最开始效劳的地方,安卓开发也不过是后来才用的。也算上web开发的一部分吧。)

什么是 JSON ?

  • JSON 指的是 JavaScript 对象表示法(JavaScript Object
    Notation)
  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言 *
  • JSON 具有自我描述性,更易理解

* JSON 使用 JavaScript 语法来描述数据对象,但是
JSON 仍然独立于语言和平台。JSON 解析器和 JSON
库支持许多不同的编程语言。


相比 XML 的不同之处

  • 没有结束标签
  • 更短
  • 读写的速度更快
  • 能够使用内建的 JavaScript eval() 方法进行解析
  • 使用数组
  • 不使用保留字

JSON:JavaScript
对象表示法(JavaScript Object Notation)。

为什么使用 JSON?

对于 AJAX 应用程序来说,JSON 比 XML 更快更易使用

JSON
是存储和交换文本信息的语法。类似 XML。

JSON 语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。

  • 数据在名称/值对中
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组

JSON
比 XML 更小、更快,更易解析。

JSON 值

JSON 值可以是:

  • 数字(整数或浮点数)
  • 字符串(在双引号中)
  • 逻辑值(true 或 false)
  • 数组(在方括号中)
  • 对象(在花括号中)
  • null

JSON 文件

  • JSON 文件的文件类型是 “.json”
  • JSON 文本的 MIME 类型是 “application/json”

在Html5中使用Json,将Json中的内容给元素赋值,其中涉及CSS样式,JavaScript脚本。具体如下图所示:

图片 1

具体不多解释,代码如下:

图片 2图片 3

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>The eightth page</title>
  5     <style type="text/css">
  6         #group
  7         {
  8             width:400px;
  9             padding:20px;
 10             margin:20px;
 11         }
 12         input
 13         {
 14             margin-left: 10px;
 15             height: 20px;
 16         }
 17         div
 18         {
 19             margin-top: 10px;
 20             height: 20px;
 21         }
 22         .t0
 23         {
 24             vertical-align: middle;
 25         }
 26         input[type="checkbox"]
 27         {
 28             vertical-align: middle;
 29         }
 30         input[type="radio"]
 31         {
 32             vertical-align: middle;
 33         }
 34         .t
 35         {
 36             height: 20px;
 37             width: 60px;
 38             line-height: 20px;
 39             display: block;
 40             float: left;
 41         }
 42     </style>
 43     <script type="text/javascript">
 44         window.onload = function () {
 45             var txt = {
 46                 "fname": "Alan",
 47                 "fage": 20,
 48                 "flove": ["song", "run", "jump"],
 49                 "fplay": { "basketball": "basketball" },
 50                 "fold": true,
 51                 "fwife": null
 52             };
 53             var obj = eval(txt);
 54             //给文本框复制
 55             document.getElementById("fname").value = obj.fname;
 56             document.getElementById("fage").value = obj.fage;
 57             //给复选框复制
 58             var objLove = obj.flove;
 59             var objElements = document.getElementsByName("flove");
 60             for (var i = 0; i < objLove.length; i++) {
 61                 for (var j = 0; j < objElements.length; j++) {
 62                     if (objLove[i] == objElements[j].value) {
 63                         objElements[j].checked = "checked";
 64                         break;
 65                     }
 66                 }
 67             }
 68             //给单选框复制
 69             var objPlay = obj.fplay;
 70             var objPlayElements = document.getElementsByName("fplay");
 71             for (var i = 0; i < objPlayElements.length; i++) {
 72                 if (objPlayElements[i].value == objPlay.basketball) {
 73                     objPlayElements[i].checked = "checked";
 74                     break;
 75                 }
 76             }
 77             //给文本框复制
 78             var old = obj.fold;
 79             if (old) {
 80                 document.getElementById("fold").value = "very old";
 81             } else {
 82                 document.getElementById("fold").value = "no old";
 83             }
 84             if (obj.fwife == null) {
 85                 document.getElementById("fwife").value = "No wife";
 86             } else {
 87                 document.getElementById("fwife").value = obj.fwife.ToString();
 88             }
 89         }
 90     </script>
 91 </head>
 92 <body>
 93     <header>
 94         <h1>信息录入</h1>
 95     </header>
 96     <form name="myForm" id="myForm" action="#" method="post" >
 97     <fieldset id="group">
 98     <legend id="group1">Information</legend>
 99     <div>
100         <label class="t"> Name:</label>
101         <input type="text" id="fname" />
102     </div>
103     <div>
104         <label class="t"> Age:</label><input type="number" id="fage" />
105     </div>
106     <div>
107         <label class="t"> Love:</label>
108         <input type="checkbox" id="chkSong" value="song" name="flove" />
109         <label class="t0">Song</label>
110         <input type="checkbox" id="chkRun" value="run" name="flove" />
111         <label class="t0">Run</label>
112         <input type="checkbox" id="chkJum" value="jump" name="flove" />
113         <label class="t0">Jump</label></div>
114     <div>
115         <label class="t"> Play:</label>
116         <input type="radio" id="rbFball" value="football" name="fplay" />
117         <label class="t0"> FootBall </label>
118         <input type="radio" id="tbBall" value="basketball" name="fplay" />
119         <label class="t0">BasketBall</label>
120     </div>
121     <div>
122         <label class="t"> Old:</label>
123         <input type="text" id="fold" />
124     </div>
125     <div>
126         <label class="t">Wife:</label>
127         <input type="text" id="fwife" />
128     </div>
129     <div>
130         <label class="t">DateTime:</label>
131         <input type="date"  id="fdatetime" value="目前IE11还不支持datetime类型" />
132     </div>
133     <div>
134         <label class="t">Color:</label>
135         <input type="color"  id="fcolor" value="目前IE11还不支持color类型" />
136     </div>
137     <div>
138         <label class="t">Car:</label>
139         <input type="text"  id="Color1" list="cars" />
140         <datalist id="cars">
141             <option value="Bus" />
142             <option value="Jeep" />
143             <option value="Bench" />
144             <option value="BaoMa" />
145         </datalist>
146     </div>
147     <div>
148     <input type="submit" value="Submit" id="fsubmit" />
149     <input type="reset" value="Reset" id="freset" />
150     </div>
151     </fieldset>
152     </form>
153 </body>
154 </html>

View Code

 

{
"employees": [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]
}

这个 employee 对象是包含 3 个员工记录(对象)的数组。

什么是 JSON ?

  • JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言 *
  • JSON 具有自我描述性,更易理解

* JSON
使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON
解析器和 JSON 库支持许多不同的编程语言。

JSON – 转换为 JavaScript 对象

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval()
函数,用 JSON
数据来生成原生的 JavaScript 对象。

这也就是为什么在ajax里面返回数据格式多为json类型

(就了解下,免得面试官问这个脑残问题。)

为什么使用 JSON?

对于 AJAX 应用程序来说,JSON 比 XML 更快更易使用:

使用 XML

  • 读取 XML 文档
  • 使用 XML DOM 来循环遍历文档
  • 读取值并存储在变量中

使用 JSON

  • 读取 JSON 字符串
  • 用 eval() 处理 JSON 字符串

JSON 语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。

  • 数据在名称/值对中
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组

JSON 名称/值对

JSON 数据的书写格式是:名称/值对。

名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值:

"firstName" : "John"

这很容易理解,等价于这条 JavaScript 语句:

firstName = "John"

JSON 值(也可以说是json的k/v中value的参数类型)

JSON 值可以是:

  • 数字(整数或浮点数)
  • 字符串(在双引号中)
  • 逻辑值(true 或 false)
  • 数组(在方括号中)
  • 对象(在花括号中)
  • null

JSON 对象

JSON 对象在花括号中书写:

对象可以包含多个名称/值对:

{ "firstName":"John" , "lastName":"Doe" }

这一点也容易理解,与这条 JavaScript 语句等价:

firstName = "John"
lastName = "Doe"

JSON 数组

JSON 数组在方括号中书写:

数组可包含多个对象:

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

在上面的例子中,对象 “employees”
是包含三个对象的数组。每个对象代表一条关于某人(有姓和名)的记录。

JSON 使用 JavaScript 语法

因为 JSON 使用 JavaScript 语法,所以无需额外的软件就能处理 JavaScript
中的 JSON。

通过 JavaScript,您可以创建一个对象数组,并像这样进行赋值:

例子

var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];

可以像这样访问 JavaScript 对象数组中的第一项:

employees[0].lastName;

返回的内容是:

Gates

可以像这样修改数据:

employees[0].lastName = "Jobs";

JSON 文件

  • JSON 文件的文件类型是 “.json”
  • JSON 文本的 MIME 类型是 “application/json”

摘自
 w3c.com

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有