快捷導(dǎo)航

Jquery解析json字符串及json數(shù)組的方法

更新時(shí)間：2015年05月29日 10:54:22 作者：wo_soul

這篇文章主要介紹了Jquery解析json字符串及json數(shù)組的方法,實(shí)例分析了jQuery操作json格式字符串與數(shù)組的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了Jquery解析json字符串及json數(shù)組的方法。分享給大家供大家參考。具體如下：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script src="js/jquery-1.6.2.min.js"></script> 
</head> 
<body> 
<hr /> 
<h3>解析json字符串、json數(shù)組</h3> 
<input type="button" id="jsonBtn" name="jsonBtn" value="jsonArray" /> 
<input type="button" id="jsonArray2" name="jsonArray2" value="jsonArray2" /> 
<input type="button" id="jsonStr" name="jsonStr" value="jsonStr" /> 
<input type="button" id="jsonStr2" name="jsonStr2" value="jsonStr2" /> 
<hr /> 
<div class="jsonText"> 
 {"ret": 0, "msg": "", "is_lost":0, "nickname": "小米", "gender": "男", "province": "廣東", "city": "廣州", "year": "1990", "figureurl": "http:\/\/qzapp.qlogo.cn\/qzapp\/101152201\/D87BF108B19279F31587CE96E5648A98\/30", "figureurl_1": "http:\/\/qzapp.qlogo.cn\/qzapp\/101152201\/D87BF108B19279F31587CE96E5648A98\/50", "figureurl_2": "http:\/\/qzapp.qlogo.cn\/qzapp\/101152201\/D87BF108B19279F31587CE96E5648A98\/100", "figureurl_qq_1": "http:\/\/q.qlogo.cn\/qqapp\/101152201\/D87BF108B19279F31587CE96E5648A98\/40", "figureurl_qq_2": "http:\/\/q.qlogo.cn\/qqapp\/101152201\/D87BF108B19279F31587CE96E5648A98\/100", "is_yellow_vip": "0", "vip": "0", "yellow_vip_level": "0", "level": "0", "is_yellow_year_vip": "0"} 
</div> 
<hr /> 
<div class="jsonArray"> 
 { root: 
  [ 
  {name:'1',value:'0'}, 
  {name:'6101',value:'西安市'}, 
  {name:'6102',value:'銅川市'}, 
  {name:'6103',value:'寶雞市'}, 
  {name:'6104',value:'咸陽(yáng)市'}, 
  {name:'6105',value:'渭南市'}, 
  {name:'6106',value:'延安市'}, 
  {name:'6107',value:'漢中市'}, 
  {name:'6108',value:'榆林市'}, 
  {name:'6109',value:'安康市'}, 
  {name:'6110',value:'商洛市'} 
  ], 
 json: 
  [ 
  {name:'6103',value:'寶雞市'}, 
  {name:'6104',value:'咸陽(yáng)市'}, 
  {name:'6107',value:'漢中市'}, 
  {name:'6108',value:'榆林市'}, 
  {name:'6110',value:'商洛市'} 
  ] 
 } 
</div> 
<hr /> 
<div class="jsonArray2"> 
 [ 
 {name:'1',value:'0'}, 
 {name:'6101',value:'西安市'}, 
 {name:'6102',value:'銅川市'}, 
 {name:'6103',value:'寶雞市'}, 
 {name:'6104',value:'咸陽(yáng)市'}, 
 {name:'6105',value:'渭南市'}, 
 {name:'6106',value:'延安市'}, 
 {name:'6107',value:'漢中市'}, 
 {name:'6108',value:'榆林市'}, 
 {name:'6109',value:'安康市'}, 
 {name:'6110',value:'商洛市'} 
 ] 
</div> 
</body> 
</html> 
<script type="text/javascript"> 
 ///jQuery 解析json字符串 
 //解析復(fù)雜的json數(shù)組 
 $("#jsonBtn").click(function(){ 
 var data=$(".jsonArray").html(); 
 alert("-----"+data); 
 var dataObj=eval("("+data+")");//轉(zhuǎn)換為json對(duì)象 
 alert(dataObj.root.length);//輸出root的子對(duì)象數(shù)量 
 alert(dataObj.json.length);//輸出json的子對(duì)象數(shù)量 
  //遍歷json數(shù)組 
  $.each(dataObj.root, function(i, item) { 
  alert(item.name+"-----root-------"+item.value); 
  }); 
  //遍歷json數(shù)組 
  $.each(dataObj.json, function(i, item) { 
  alert(item.name+"-----json-------"+item.value); 
  }); 
 }); 
 //解析單個(gè)的json數(shù)組 
 $("#jsonArray2").click(function(){ 
 var data=$(".jsonArray2").html(); 
 alert("-----"+data); 
 var dataObj=eval("("+data+")");//轉(zhuǎn)換為json對(duì)象 
 alert(dataObj.length);//輸出root的子對(duì)象數(shù)量 
  //遍歷json數(shù)組 
  $.each(dataObj, function(i, item) { 
  alert(item.name+"-----jsonArray-------"+item.value); 
  }); 
 }); 
 ///解析標(biāo)準(zhǔn)的Json串 方法一 
 $("#jsonStr").click(function(){ 
 var json=$(".jsonText").html(); 
 alert("---2--"+json); 
  var item = jQuery.parseJSON(json); 
  alert(item.nickname); 
  alert(item.ret); 
  alert(item.figureurl ); 
 }); 
 ///解析標(biāo)準(zhǔn)的Json串，方法二 
 $("#jsonStr2").click(function(){ 
 var json=$(".jsonText").html(); 
 alert("---2--"+json); 
  var obj = eval("("+json+")"); 
  alert(obj.nickname); 
  alert(obj.ret); 
  alert(obj.figureurl ); 
 }); 
</script>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: