Explication détaillée de l'analyse par Jquery des méthodes de chaîne Json et de tableau Json-js tutoriel-php.cn

Explication détaillée de l'analyse par Jquery des méthodes de chaîne Json et de tableau Json

php中世界最好的语言

Libérer： 2018-04-25 13:42:26

original

3058 Les gens l'ont consulté

Cette fois, je vous apporte une explication détaillée des méthodes de Jquery d'analyse de Json string et du tableau Json Notes pour Jquery analysant la chaîne Json et le tableau Json. . Lesquels, les suivants sont des cas pratiques, jetons-y un coup d'œil.

<!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 /> 
<p 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"} 
</p> 
<hr /> 
<p 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:'商洛市'} 
  ] 
 } 
</p> 
<hr /> 
<p 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:'商洛市'} 
 ] 
</p> 
</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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

jquery+css3 réalise une interaction entre la souris et le formulaire

jQuery crée un effet carrousel d'images réactif

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!