JS前端取得並解析後臺服務器返回的JSON數據的方法

摘要:主要介紹:使用eval函數解析JSON數據;$.getJSON()方法得到服務器返回的JSON數據html

JavaScript eval() 函數jquery

eval(string) 函數可計算某個字符串,並執行其中的的 JavaScript 代碼。express

 

參數string:要計算的字符串,其中含有要計算的 JavaScript 表達式或要執行的語句。json

該方法只接受原始字符串做爲參數,若是 string 參數不是原始字符串,那麼該方法將不做任何改變地返回。所以請不要爲 eval() 函數傳遞 String 對象來做爲參數。服務器

 

使用eval函數解析json閉包

假設服務器返回的JSON字符串:異步

 
 
  1. var data="  
  2. {  
  3. root:  
  4. [  
  5. {name:'1',value:'0'},  
  6. {name:'6101',value:'北京市'},  
  7. {name:'6102',value:'天津市'},  
  8. {name:'6103',value:'上海市'},  
  9. {name:'6104',value:'重慶市'},  
  10. {name:'6105',value:'渭南市'},  
  11. {name:'6106',value:'延安市'},  
  12. {name:'6107',value:'漢中市'},  
  13. {name:'6108',value:'榆林市'},  
  14. {name:'6109',value:'安康市'},  
  15. {name:'6110',value:'商洛市'}  
  16. }";  

若是jquery異步請求沒作類型說明,或者以字符串方式接受,那麼須要作一次對象化處理,即將該JSON字符串放於eval()中執行一次ide

 
 
  1. var dataObj=eval("("+data+")");//轉換爲json對象 

可能你已經注意到啦,爲何eval參數裏面要寫成"("+data+")"這種加圓括號的形式?函數

緣由:spa

前面咱們提到了,eval()函數能夠執行參數裏的表達式!

因爲json是以」{}」的方式來開始以及結束的,在JS中,它會被當成一個語句塊來處理,因此必須強制性的將它轉換成一種表達式。

 

加上圓括號的目的是迫使eval函數在處理JavaScript代碼的時候強制將括號內的表達式(expression)轉化爲對象,而不是做爲語句(statement)來執行。

舉一個例子,例如對象字面量{},如若不加外層的括號,那麼eval會將大括號識別爲JavaScript代碼塊的開始和結束標記,那麼{}將會被認爲是執行了一句空語句。因此下面兩個執行結果是不一樣的:

 
 
  1. alert(eval("{}"); // return undefined 
  2. alert(eval("({})");// return object[Object] 

這種寫法,咱們常常在js中能夠看到:

 
 
  1. (function(){ 
  2.  
  3. })(jQuery);  //作閉包操做 

閉包就是將函數內部和函數外部鏈接起來的一座橋樑!

 

利用$.getJSON()方法

提示:雖然 eval() 的功能很是強大,但在實際使用中用到它的狀況並很少。

對於服務器返回的JSON字符串,若是jquery異步請求將type設爲「json」,或者利用$.getJSON()方法得到服務器返回,那麼就不須要eval()方法了,由於這時候獲得的結果已是json對象了,只需直接調用該對象便可,這裏以$.getJSON方法爲例說明json數據的處理方法:

 
 
  1. $.getJSON("http://www.exp99.com/",{param:"USER_GUID"},function(data){  
  2. //此處返回的data已是json對象  
  3.   $.each(data.root,function(idx,item){  
  4.     if(idx==0){  
  5.       return true;//同continue,返回false同break  
  6.     }  
  7.     console.log("name:"+item.name+",value:"+item.value);  
  8.   });  
  9. }); 

 

轉載來自:http://www.exp99.com/f2e/qianduankaifa_77.html

相關文章
相關標籤/搜索