json在項目中的應用大總結

本文轉載自查看原文 2016-07-03 11:26 10653 ES5/ json

一、摘要

剛開始接觸json的時候，那時候還不太清楚json到底是個什么東西，然后就在項目中使用了它。因為沒有搞明白json的本質，所以剛開始使用json的時候走了不少彎路。這次總結一些json的知識，總結主要是想梳理一下自己使用json的一些應用場景，讓自己對json有一個更深刻的認識，以后在項目中可以更加熟練的應用它。

二、總結：

1.json在前端中的應用：

a）ajax+json使用場景：

ajax處理登錄驗證信息解析json格式的String類型對象和ajax獲得服務端的響應數據的方式request.responseText

評論處理，用ajax將表單的數據提交給服務端，客戶端解析從服務端傳過來的json格式的List類型的數據：

用ajax來獲取服務器端的數據，如果從服務器傳到前端的數據都是JSON的字符串形式，在前端要讀取數據，需要先將字符串轉化成json格式的對象。

js中的eval（）函數就是將json格式的字符串轉化為json格式的對象。

剛開始學習的時候首先學的是原生的ajax，還沒有學習jquery（jquery中的ajax更方便），在項目中就用上面的原生的ajax來和服務器進行交互。當前端需要像后台異步請求大量的數據時，必須要有一個方法讓我們可以將這些數據方便的從后台傳到前端，比如后台要傳給前端的數據是一個數組類型的，后台通過相應的方法將這個數組類型的數據轉化成json格式的字符串，然后再傳給前端，前端為了將從后台獲取到的json格式的字符串的內容一個個顯示在對應的位置，就需要先將該json格式的字符串轉化成json對象（eval函數，實際項目中應該避免使用eval），然后才能一個個的將數據讀取出來（第二張圖中遍歷獲取到的后台數據）。

剛開始如果對json不熟悉，可能會遇到不知道如何讀取從后台傳到前端的json格式的字符串的情況。這個時候就要搞清楚json的概念。（要在實際中應用json，要掌握json格式數據的寫法以及如何讀取json格式的數據）。

2.json基礎：

a）了解json概念：

b)了解json語法：

地址：http://www.w3school.com.cn/json/json_syntax.asp

1.json值：

2.json對象寫法：{ "firstName":"John" , "lastName":"Doe" }
3.json數組寫法（可包含多個json對象）：

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

讀取json數組的方式：
employees[0].lastName;//獲取第一項json對象的lastName屬性的值
for（var i=0;i<employees.length;i++）{//js中遍歷json數組中的所有的值
  alert( employees[i].firstName);
  alert( employees[i].lastName);
}

var a={
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
a.employees[0].lastName;//獲取employees第一項json對象的lastName屬性的值

c)搞清楚json對象和json字符串的區別(后面總結)

3.jquery中的ajax+json（項目中用的最多的）：
學了jquery之后，實際應用中經常用的當然是用jquery中的ajax來向服務器發送請求了

a)jquery的ajax基礎用法：
獲取表單信息，並將該信息傳給服務器，服務器像前端返回json數組對象，前端獲取之后讀取該json數組對象（圖片中描述不准確，補充：返回的是對象就可以直接遍歷）
表單數據少時，可以采用直接像下面這樣獲取表單數據之后傳遞給服務器
實例一：

實例二：服務器只向前端傳了一個數值類型的數據（直接輸出data就可以得到該值，因為json的值可以是數值，用data[0]一樣可以的得到）