Maison > Article > interface Web > Comment jQuery+ajax implémente la traversée des données json

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

php中世界最好的语言original: 2018-04-04 11:45:011662parcourir

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"} 
] 
}

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("系统出现问题"); 
} 
});

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>

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!

php JavaScript json jquery ajax 封装

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser le contrôle de notation dans AjaxToolKitArticle suivant：Comment utiliser le contrôle de notation dans AjaxToolKit

Articles Liés

Voir plus