深入學習js中的json

1.json是javascript對象表示法,json是存儲和交換文本信息的語法,類似於XML

json比XML更小,更易解析,更快

json能夠使用javascript內建的eval()函數來構建原生javascrpt對象。

 

下面這個例子表示創建json對象,並獲取它的值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在javascript中創建json對象</title>
<script type="text/javascript">
//創建json對象,json有兩種格式{}表示json對象,[]表示json數組
var jsonData={
 "name":"jt",
 "age":"18",
 "address":"shenzheng",
 "phone":"123456"
  };
document.getElementById("jname").innerHTML=jsonData.name;
document.getElementById("jname").innerHTML=jsonData.age;
document.getElementById("jname").innerHTML=jsonData.address;
document.getElementById("jname").innerHTML=jsonData.phone;
</script>
</head>

<body>
<h2>在javascript中創建json對象</h2>
<p>
name:<span id="jname"></span><br/>
age:<span id="jage"></span><br/>
address:<span id="jaddress"></span><br/>
phone:<span id="jphone"></span<br/>
</p>
</body>
</html>

json的特性:

json是純文本,json具有自我描述性(人類可讀),json具有層級結構值中存在值,json可以通過javascript進行解析(使用內建的 JavaScript eval() 方法進行解析),json可以使用ajax進行傳輸。

 

json語法規則:

1.數據在名稱/值對中

2.數據有逗號分隔

3.花括號保存對象{}

4.方括號保存數組[]

 

JSON 名稱/值對

JSON 數據的書寫格式是:名稱/值對。

名稱/值對包括字段名稱(在雙引號中),後面寫一個冒號,然後是值:

"firstName" : "John"

這很容易理解,等價於這條 JavaScript 語句:

firstName = "John"
 
json值可以是:
1.數字(整數或浮點數)
2.字符串(在雙引號中)
3.邏輯值(true或則false)
4.數組在方括號中
5.對象在花括號中
6.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" }
]
}
在上面的例子中emploees數組中包含3個對象,每個對象代表一條關於某人(有姓和名)的記錄。
 
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
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>通過json對象來創建對象</title>

</head>

<body> <p> aaa<span id="nameAndAge"></span> </p> <script type="text/javascript">  var employees=[   {"name":"jt1","age":"18"},   {"name":"jt2","age":"19"},   {"name":"jt3","age":"20"}  ];  alert(employees[0].age);  employees[0].age=30;  alert(employees[0].age);  document.getElementById("nameAndAge").innerHTML=11; </script> </body> </html>

 

JSON 解析器

提示:eval() 函數可編譯並執行任何 JavaScript 代碼。這隱藏了一個潛在的安全問題。

使用 JSON 解析器將 JSON 轉換爲 JavaScript 對象是更安全的做法。JSON 解析器只能識別 JSON 文本,而不會編譯腳本。

在瀏覽器中,這提供了原生的 JSON 支持,而且 JSON 解析器的速度更快。

較新的瀏覽器和最新的 ECMAScript (JavaScript) 標準中均包含了原生的對 JSON 的支持。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>通過瀏覽器自帶的json解析器解析json字符串</title>

</head>

<body>

<p> name:<span id="name"></span><br/> age:<span id="age"></span> </p> <script type="text/jscript">  var txt='{"employees":['+  '{"name":"jt1","age":"18"},'+  '{"name":"jt2","age":"20"},'+  '{"name":"jt3","age":"30"}]}';  var obj=JSON.parse(txt);  var name=document.getElementById("name").innerHTML=obj.employees[0].name+" ";    document.getElementById("age").innerHTML=obj.employees[1].age; </script>

</body> </html>

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章