Comment jQuery+ajax implémente la traversée des données json-js tutoriel-php.cn

Comment jQuery+ajax implémente la traversée des données json

php中世界最好的语言

Libérer： 2018-04-04 11:45:01

original

1711 Les gens l'ont consulté

Cette fois, je vais vous présenter jQuery+ajax comment implémenter la traversée de données json, quelles sont les notes pour que jQuery+ajax implémente la traversée de données json, voici des cas pratiques , un Levez-vous et jetez un œil.

Laissez-moi d'abord vous expliquer mes besoins : après avoir fait une requête ajax, les données json suivantes sont renvoyées en arrière-plan.

Le code d'implémentation spécifique est le suivant :

JavaScriptCode

{ 
"data":[ 
{"id":"1","name":"选择A","value":"A"}, 
{"id":"2","name":"选择B","value":"B"}, 
{"id":"3","name":"选择C","value":"C"} 
] 
}

Copier après la connexion

La classe de données json ci-dessus est analysée dans la fonction de réussite de jquery

Code JavaScript

$.ajax({ 
type: "POST", 
url: "xxx.do", 
dataType : "json", // 指定返回类型 
data: {xxx:"yyy"}, // 传递到后台的参数 
success: function(data) 
{ 
$.each(data, function(index,values){ // 解析出data对应的Object数组 
$.each(values,function(index2,value){ // 遍历Object数组 ，每个对象的值存放在value ，index2表示为第几个对象 
// 根据自己的逻辑进行数据的处理 
alert(value.name + " " + value.value); 
// TODO: 逻辑 
}); 
}); 
}, 
error : function() 
{ 
alert("系统出现问题"); 
} 
});

Copier après la connexion

Continuez avec un exemple

Ce chapitre partage un exemple de code, qui est ajax encapsulé par jQuery traitement des requêtes pour les données JSON .
Le code est relativement simple et peut être parcouru par du personnel expérimenté. Les débutants peuvent l'utiliser comme référence.
Le code est le suivant :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<title>脚本之家</title> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
 $("#bt").click(function(){
  $.ajax({
   type: "get",
   dataType: "json",
   url: "demo/jQuery/ajax/txt/json.txt",
   success: function(msg){
    var data = msg
    str="";
    $.each(data,function(index, n){
     str=str+data[index].webName+","+data[index].url+","+data[index].age+"<br/>";
    });
    $("#show").html(str);
   }
  });
 })
})
</script>
</head>
<body>
<p id="show"></p>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

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 PHP chinois. !

Lecture recommandée :

Comment utiliser le contrôle de notation avec AjaxToolKit

Ajax implémente le téléchargement de fichiers avec la fonction d'effet de barre de progression

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!