jQuery ajax json code de traversée des données-js tutoriel-php.cn

jQuery ajax json code de traversée des données

高洛峰

Libérer： 2017-01-12 09:36:02

original

1497 Les gens l'ont consulté

Laissez-moi d'abord vous expliquer mes besoins : après avoir effectué 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 :

Code JavaScript

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

Copier après la connexion

Analyser la classe de données json ci-dessus dans la fonction de réussite de jquery

JavaScript Code

$.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

Continuons avec un exemple

Ce chapitre partage un exemple de code, qui est le traitement des requêtes ajax pour les données JSON encapsulées par jQuery.
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>PHP中文网</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>
<div id="show"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

Copier après la connexion

Ce qui précède est le code de traversée de données jQuery ajax json introduit par l'éditeur. J'espère qu'il vous sera utile. Si vous avez des questions, veuillez partir. moi un message. L'éditeur répondra à tout le monde à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus d'articles sur le code de traversée de données jQuery ajax json, veuillez faire attention au site Web PHP chinois !