search

Home  >  Article  >  Web Front-end  >  Jquery's method of parsing json strings and json arrays_jquery

Jquery's method of parsing json strings and json arrays_jquery

WBOY
WBOYOriginal
2016-05-16 15:57:231157browse

The example in this article describes how Jquery parses json strings and json arrays. Share it with everyone for your reference. The details are as follows: 

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script src="js/jquery-1.6.2.min.js"></script> 
</head> 
<body> 
<hr /> 
<h3>解析json字符串、json数组</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:'咸阳市'}, 
  {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:'咸阳市'}, 
  {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:'咸阳市'}, 
 {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字符串 
 //解析复杂的json数组 
 $("#jsonBtn").click(function(){ 
 var data=$(".jsonArray").html(); 
 alert("-----"+data); 
 var dataObj=eval("("+data+")");//转换为json对象 
 alert(dataObj.root.length);//输出root的子对象数量 
 alert(dataObj.json.length);//输出json的子对象数量 
  //遍历json数组 
  $.each(dataObj.root, function(i, item) { 
  alert(item.name+"-----root-------"+item.value); 
  }); 
  //遍历json数组 
  $.each(dataObj.json, function(i, item) { 
  alert(item.name+"-----json-------"+item.value); 
  }); 
 }); 
 //解析单个的json数组 
 $("#jsonArray2").click(function(){ 
 var data=$(".jsonArray2").html(); 
 alert("-----"+data); 
 var dataObj=eval("("+data+")");//转换为json对象 
 alert(dataObj.length);//输出root的子对象数量 
  //遍历json数组 
  $.each(dataObj, function(i, item) { 
  alert(item.name+"-----jsonArray-------"+item.value); 
  }); 
 }); 
 ///解析标准的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 ); 
 }); 
 ///解析标准的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>

I hope this article will be helpful to everyone’s jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Understand at a glance: Detailed explanation of jsonp_jqueryNext article：Understand at a glance: Detailed explanation of jsonp_jquery

Related articles

See more