suchen

Heim >Web-Frontend >js-Tutorial >Wie jQuery+Ajax das Durchlaufen von JSON-Daten implementiert

Wie jQuery+Ajax das Durchlaufen von JSON-Daten implementiert

php中世界最好的语言
php中世界最好的语言Original
2018-04-04 11:45:011712Durchsuche

Dieses Mal werde ich Ihnen jQuery+Ajax zeigen, wie man JSON-Datendurchquerung implementiert, was sind die Vorsichtsmaßnahmen für jQuery+Ajax, um JSON-Datendurchquerung zu implementieren, das Folgende sind praktische Fälle , einer Steh auf und schau es dir an.

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:

JavaScriptCode

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

Die obige JSON-Datenklasse wird in der Erfolgsfunktion von jquery analysiert

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 Sie mit einem Beispiel fort

In diesem Kapitel wird ein Codebeispiel vorgestellt, bei dem es sich um eine jQuery-gekapselte Ajax-Anforderungsverarbeitung für 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>脚本之家</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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

So verwenden Sie die Bewertungskontrolle mit AjaxToolKit

Ajax implementiert das Hochladen von Dateien mit der Funktion „Fortschrittsbalkeneffekt“

Das obige ist der detaillierte Inhalt vonWie jQuery+Ajax das Durchlaufen von JSON-Daten implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript json jquery ajax 封装
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：So verwenden Sie die Bewertungssteuerung in AjaxToolKitNächster Artikel：So verwenden Sie die Bewertungssteuerung in AjaxToolKit

In Verbindung stehende Artikel

Mehr sehen