1. 程式人生 > >JS Ajax responseText 解析JSON

JS Ajax responseText 解析JSON

解決ajax處理伺服器端返回結果responseText中是JSON的資料。

第一,json格式的檔案內容如下:

{  

    "city":"ShangHai",  

    "telephone":"123456789"  

}  

第二,伺服器端返回的json資料就是上述的內容在responseText中,現在要取出來,方法有兩種:

 

方法1:

var json=JSON.parse(request.responseText);  

alert(json.city);  

 

方法2:

 

 

var result = request.responseText;  

var jsonObject=eval("("+result+")");  

alert(jsonObject.telephone);  

eval();  //此方法不推薦

JSON.parse();  //推薦方法

一、兩種方法的區別

我們先初始化一個json格式的物件:

  var jsonDate = '{ "name":"周星馳","age":23 }'

  var jsonObj = eval( '(' + jsonDate + ')' );  // eval();方法

  var jsonObj = JSON.parse( jsonDate );  // JSON.parse(); 方法

然後在控制檯呼叫:

  console.log( jsonObj.name );  // 兩種方法都可以正確輸入 周星馳

那麼問題來了 兩種方法有什麼區別呢?(下面我們稍微把程式碼改動一下,藍色字型為修改部分)

  var jsonDate = '{ "name":alert("hello"),"age":23 }'

  var jsonObj = eval( '(' + jsonDate + ')' );  // eval();方法

  console.log( jsonObj.age );  //會先執行“alert”輸出“hello”  然後才輸出 23

換“JSON.parse();”方法:

  var jsonDate = '{ "name":alert("hello"),"age":23 }'

  var jsonObj = JSON.parse( jsonDate );  // JSON.parse(); 方法

  cosole.log( jsonobj.age )  // 報錯  這個錯誤告訴我們這個字串是不合法的

小結:“eval();”方法解析的時候不會去判斷字串是否合法,而且json物件中的js方法也會被執行,這是非常危險的;而“JSON.parse();”方法的優點就不用多說了,推薦此方法。(不明白的盆友可以自己在控制檯測試一下)

二、擴充套件問題

  var jsonDate = '{ "name":"周星馳","age":23 }'

大家可以看到在上面測試時一直用紅色把包在花括號外面的引號標註了起來,這對引號是很關鍵卻又是常常被忽略的,因為 “eval();” 和 “JSON.parser();” 這兩個方法的引數只接受字串,也就是說只能解析字串!!

那我不經會有一個思考,我們在初始化的時候若不加引號對,那麼它本身就是物件,js可以直接獲取物件本身的屬性和方法;為什麼還要加引號將它變成字串之後再用 “eval();” 或者 “JSON.parse();” 解析,這樣做不是既不環保又沒有效率嗎?

原因很簡單:前端提供給後臺的只能是字串資料格式,後臺返回給前臺的就看返回的是什麼資料格式,是字串就必須解析之後再用。

(這個小問題一般大家都會忽略掉,不太關注。我之所以好奇的原因也是因為對後臺瞭解的不夠,把這個問題丟擲來希望對後臺不熟的朋友有所幫助,知道是怎麼回事後自然而然會加深記憶,在開發過程中就不會漏掉了)