suchen

Heim >Web-Frontend >js-Tutorial >jQuery-Ajax-JSON-Datendurchlaufcode

jQuery-Ajax-JSON-Datendurchlaufcode

高洛峰
高洛峰Original
2017-01-12 09:36:021487Durchsuche

Lassen Sie mich zunächst meine Anforderungen erläutern: Nach einer Ajax-Anfrage werden die folgenden JSON-Daten im Hintergrund zurückgegeben.

Der spezifische Implementierungscode lautet wie folgt:

JavaScript-Code

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

Parsen Sie die obige JSON-Datenklasse in der Erfolgsfunktion von 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("系统出现问题");
}
});

Fahren wir mit einem Beispiel fort

In diesem Kapitel wird ein Codebeispiel vorgestellt, bei dem es sich um die Ajax-Anforderungsverarbeitung für von jQuery gekapselte JSON-Daten handelt.
Der Code ist relativ einfach und kann von erfahrenem Personal als Referenz verwendet werden.
Der Code lautet wie folgt:

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

Das Obige ist der vom Herausgeber eingeführte jQuery-Ajax-JSON-Datendurchlaufcode. Wenn Sie Fragen haben, gehen Sie bitte mir eine Nachricht. Der Herausgeber wird allen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere Artikel zum Thema jQuery Ajax JSON Data Traversal Code finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JSON-Beispielcode für Ajax und Traversal-Array von jQueryNächster Artikel：JSON-Beispielcode für Ajax und Traversal-Array von jQuery

In Verbindung stehende Artikel

Mehr sehen