1. 程式人生 > >JS前端取得並解析後臺伺服器返回的JSON資料的方法

JS前端取得並解析後臺伺服器返回的JSON資料的方法

摘要:主要介紹:使用eval函式解析JSON資料;$.getJSON()方法獲得伺服器返回的JSON資料

JavaScript eval() 函式

eval(string) 函式可計算某個字串,並執行其中的的 JavaScript 程式碼。

引數string:要計算的字串,其中含有要計算的 JavaScript 表示式或要執行的語句。

該方法只接受原始字串作為引數,如果 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()中執行一次

  1. var dataObj=eval("("+data+")");//轉換為json物件

可能你已經注意到啦,為什麼eval引數裡面要寫成"("+data+")"這種加圓括號的形式?

原因:

前面我們提到了,eval()函式可以執行引數裡的表示式!

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

加上圓括號的目的是迫使eval函式在處理JavaScript程式碼的時候強制將括號內的表示式(expression)轉化為物件,而不是作為語句(statement)來執行。

舉一個例子,例如物件字面量{},如若不加外層的括號,那麼eval會將大括號識別為JavaScript程式碼塊的開始和結束標記,那麼{}將會被認為是執行了一句空語句。所以下面兩個執行結果是不同的:

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

這種寫法,我們經常在js中可以看到:

  1. (function(){ 
  2. })(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.       returntrue;//同continue,返回false同break 
  6.     }  
  7.     console.log("name:"+item.name+",value:"+item.value);  
  8.   });  
  9. });