Wie jQuery+Ajax das Durchlaufen von JSON-Daten implementiert-js-Tutorial-php.cn

Wie jQuery+Ajax das Durchlaufen von JSON-Daten implementiert

php中世界最好的语言

Freigeben： 2018-04-04 11:45:01

Original

1716 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!