JSON字符串和對(duì)象相互轉(zhuǎn)換實(shí)例分析
本文實(shí)例分析了JSON字符串和對(duì)象相互轉(zhuǎn)換方法。分享給大家供大家參考,具體如下:
同事問了我一個(gè)問題——server端返回了一個(gè)json結(jié)構(gòu)的字符串,怎么樣去訪問json對(duì)象里面的值?jquery有沒有對(duì)返回的JSON數(shù)據(jù)進(jìn)行解析?
我自己寫了一個(gè)小的demo,還有從網(wǎng)上查了一些資料,在這里跟大家分享一下
<!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=gb2312" /> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready( function(){ var json = {"name":"Mike","sex":"女","age":29}; alert(typeof json); var temp = obj2str(json); alert(temp); alert(typeof temp); } ); //下面這個(gè)方法是將json對(duì)象轉(zhuǎn)換為字符串 function obj2str(o){ var r = []; if(typeof o =="string") return "\""+o.replace(/([\'\"\\])/g,"\\$1").replace(/(\n)/g,"\\n").replace(/(\r)/g,"\\r").replace(/(\t)/g,"\\t")+"\""; if(typeof o =="undefined") return "undefined"; if(typeof o == "object"){ if(o===null) return "null"; else if(!o.sort){ for(var i in o) r.push(i+":"+obj2str(o[i])) r="{"+r.join()+"}" }else{ for(var i =0;i<o.length;i++) r.push(obj2str(o[i])) r="["+r.join()+"]" } return r; } return o.toString(); } /*使用jquery插件,需要注意的是json的key-value必須都為字符串,即都需要使用雙引號(hào)包起來, 不能使用單引號(hào),如果value是數(shù)字就不需要用雙引號(hào)包起來*/ function jquery_string_to_json(){ var jsonString = '{"name":"huangbiao","sex":"boy","age":16}'; //var jsonString = "{'name':'huangbiao','sex':'boy','age':16}";//錯(cuò)誤的聲明 alert(typeof jsonString); var obj = jQuery.parseJSON(jsonString); alert(typeof obj); } /*使用eval方法對(duì)于字符串里面的key-value都必須使用雙引號(hào)括起來,不能使用單引號(hào),否則不 能夠正常解析*/ function String_to_JSON(){ var json = '{"name":"huangbiao","sex":"boy","age":16}'; var temp = eval('('+json+')');//eval方法里面的括號(hào)是不能夠少的,否則報(bào)腳本錯(cuò)誤 alert(typeof temp); alert(temp.name); //使用JSON對(duì)象只能在IE8以上的版本支持,因此不建議使用這種方式轉(zhuǎn)換 //var json = '{"name":"Mike","sex":"女","age":"29"}'; //var temp = JSON.parse(json); //alert(temp.name); } </script> <title>無標(biāo)題文檔</title> </head> <body> </body> </html>
在工作中發(fā)現(xiàn)server端傳給前端JSON格式的字符串,使用eval("("+json+")");沒有辦法將得到的字符串轉(zhuǎn)換為JSON對(duì)象,解決辦法如下:
function obj2str(o){ var r = []; if(typeof o =="string") return "\""+o.replace(/([\'\"\\])/g,"\\$1").replace(/(\n)/g,"\\n").replace(/(\r)/g,"\\r").replace(/(\t)/g,"\\t")+"\""; if(typeof o =="undefined") return "undefined"; if(typeof o == "object"){ if(o===null) return "null"; else if(!o.sort){ for(var i in o) r.push(i+":"+obj2str(o[i])) r="{"+r.join()+"}" }else{ for(var i =0;i<o.length;i++) r.push(obj2str(o[i])) r="["+r.join()+"]" } return r; } return o.toString(); } function json2obj(o){ var result = obj2str(o); return eval("(" + result + ")"); }
調(diào)用json2obj(o)這個(gè)方法即可。
PS:這里再為大家推薦幾款json在線工具,相信大家在今后的開發(fā)中可以用得到:
在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具:
http://tools.jb51.net/code/json
JSON在線格式化工具:
http://tools.jb51.net/code/jsonformat
在線XML/JSON互相轉(zhuǎn)換工具:
http://tools.jb51.net/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具:
http://tools.jb51.net/code/jsoncodeformat
C語言風(fēng)格/HTML/CSS/json代碼格式化美化工具:
http://tools.jb51.net/code/ccode_html_css_json
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js實(shí)現(xiàn)圖片從左往右漸變切換效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)圖片從左往右漸變切換效果的方法,是比較典型的圖片漸變切換效果特效,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02div+css實(shí)現(xiàn)鼠標(biāo)放上去,背景跟圖片都會(huì)變化。
div+css實(shí)現(xiàn)鼠標(biāo)放上去,背景跟圖片都會(huì)變化。...2007-06-06Tesseract.js使用純js實(shí)現(xiàn)的OCR文字識(shí)別
Tesseract.js是流行的Tesseract OCR引擎的純Javascript端口,這個(gè)庫支持100多種語言,自動(dòng)文本定位和腳本檢測,一個(gè)簡單的界面,用于閱讀段落、單詞和字符邊界框,Tesseract.js既可以在瀏覽器中運(yùn)行,也可以在帶有NodeJS的服務(wù)器上運(yùn)行2023-10-10使用JavaScript實(shí)現(xiàn)一個(gè)交互式音樂播放器
JavaScript,作為前端開發(fā)的重要語言,可以實(shí)現(xiàn)許多復(fù)雜的功能,在這篇文章中,我們將一起創(chuàng)建一個(gè)交互式的音樂播放器,快跟隨小編一起學(xué)習(xí)一下吧2024-01-01js監(jiān)聽滾動(dòng)條滾動(dòng)事件使得某個(gè)標(biāo)簽內(nèi)容始終位于同一位置
js如何監(jiān)聽滾動(dòng)條滾動(dòng)事件,使得某個(gè)標(biāo)簽內(nèi)容始終位于同一位置,下面有個(gè)不錯(cuò)的示例,大家可以參考下2014-01-01