Jquery解析json字符串及json数组的方法

前端技术 2023/09/10 JavaScript

本文实例讲述了Jquery解析json字符串及json数组的方法。分享给大家供大家参考。具体如下：

<!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>

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/26497

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案