Detaillierte Erläuterung der asynchronen Verarbeitung von Json-Daten durch jQuery Ajax

Schauen wir uns zunächst ein offizielles Beispiel an
Verwenden Sie eine AJAX-Anfrage, um JSON-Daten abzurufen und das Ergebnis auszugeben:

$("button").click(function(){
  $.getJSON("demo_ajax_json.js",function(result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    });
  });
});

Diese Funktion ist die Abkürzung der Ajax-Funktion, die äquivalent ist zu:

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

An den Server gesendete Daten können als Abfragezeichenfolge an die URL angehängt werden. Wenn der Wert des Datenparameters ein Objekt (Karte) ist, wird er in eine Zeichenfolge konvertiert und URL-codiert, bevor er an die URL angehängt wird.
Die an den Rückruf übergebenen Rückgabedaten können ein JavaScript-Objekt oder ein in einer JSON-Struktur definiertes Array sein und werden mit der Methode $.parseJSON() analysiert.
Laden Sie JSON-Daten aus test.js und zeigen Sie Namensfelddaten in den JSON-Daten an:

$.getJSON("test.js", function(json){
  alert("JSON Data: " + json.users[3].name);
});

Eine asp.net-Instanz
Geben Sie zunächst die zu übergebenden JSON-Daten an: [{ " demoData: „Dies sind die JSON-Daten“}]
1, verwenden Sie eine gewöhnliche ASPX-Seite, um sie zu verarbeiten.
Ich denke, diese Methode ist am einfachsten zu verarbeiten. Schauen Sie sich den Code unten an.

$.ajax({ 
                                        type: "post", 
                                        url: "Default.aspx", 
                                        dataType: "json", 
                                        success: function (data) { 
                                                $("input#showTime").val(data[0].demoData); 
                                        }, 
                                        error: function (XMLHttpRequest, textStatus, errorThrown) { 
                                                alert(errorThrown); 
                                        } 
                                });

Hier ist der Code zum Übergeben von Daten im Hintergrund

Response.Clear(); 
Response.Write("[{"demoData":"This Is The JSON Data"}]"); 
Response.Flush(); 
Response.End();

Diese Verarbeitungsmethode analysiert die übergebenen Daten direkt in JSON-Daten, was bedeutet, dass der Front-End-JS-Code hier die analysierten Daten direkt konvertieren kann B. data[0].demoData, werden diese JSON-Objektdaten hier direkt verwendet
2, und Webservice (ASMX) wird zur Verarbeitung verwendet
Diese Verarbeitungsmethode wird nicht übergeben Daten werden als JSON-Objektdaten behandelt, jedoch als Zeichenfolge, wie unten gezeigt

$.ajax({     
type: "post",     
url: "JqueryCSMethodForm.asmx/GetDemoData",     
dataType: "json",/*这句可用可不用，没有影响*/
contentType: "application/json; charset=utf-8",     
success: function (data) {     
$("input#showTime").val(eval('(' + data.d + ')')[0].demoData);
//这里有两种对数据的转换方式，两处理方式的效果一样//$("input#showTime").val(eval(data.d)[0].demoData);
},     
error: function (XMLHttpRequest, textStatus, errorThrown) {     
alert(errorThrown);     
}     
});

Hier ist der Asmx-Methodencode

[WebMethod]     
public static string GetDemoData() {     
return "[{"demoData":"This Is The JSON Data"}]";     
}

hier Diese Verarbeitungsmethode behandelt die übergebenen JSON-Daten als Zeichenfolge. Diese Daten müssen ausgewertet werden, damit sie zu echten JSON-Objektdaten werden können.
Schauen wir uns zunächst die HTML-Vorlage an:

  <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
                <tr>
                    <th>
                        订单ID</th>
                    <th>
                        客户ID</th>
                    <th>
                        雇员ID</th>
                    <th>
                        订购日期</th>
                    <th>
                        发货日期</th>
                    <th>
                        货主名称</th>
                    <th>
                        货主地址</th>
                    <th>
                        货主城市</th>
                    <th>
                        更多信息</th>
                </tr>
                <tr id="template">
                    <td id="OrderID">
                    </td>
                    <td id="CustomerID">
                    </td>
                    <td id="EmployeeID">
                    </td>
                    <td id="OrderDate">
                    </td>
                    <td id="ShippedDate">
                    </td>
                    <td id="ShippedName">
                    </td>
                    <td id="ShippedAddress">
                    </td>
                    <td id="ShippedCity">
                    </td>
                    <td id="more">
                    </td>
                </tr>
            </table>

Worauf Sie achten müssen sind alle darin enthaltenen ID-Attribute, dies ist ein Schlüssel. Werfen wir einen Blick auf den Code für die AJAX-Anfrage und Datenbindung

    $.ajax({
            type: "get",//使用get方法访问后台
            dataType: "json",//返回json格式的数据
            url: "BackHandler.ashx",//要访问的后台地址
            data: "pageIndex=" + pageIndex,//要发送的数据
            complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
            success: function(msg){//msg为返回的数据，在这里做数据绑定
                var data = msg.table;
                $.each(data, function(i, n){
                    var row = $("#template").clone();
                    row.find("#OrderID").text(n.订单ID);
                    row.find("#CustomerID").text(n.客户ID);
                    row.find("#EmployeeID").text(n.雇员ID);
                    row.find("#OrderDate").text(ChangeDate(n.订购日期));
                    if(n.发货日期!== undefined) row.find("#ShippedDate").text(ChangeDate(n.发货日期));
                    row.find("#ShippedName").text(n.货主名称);
                    row.find("#ShippedAddress").text(n.货主地址);
                    row.find("#ShippedCity").text(n.货主城市);
                    row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.订单ID + "&pageindex="+pageIndex+"> More</a>");                    
                    row.attr("id","ready");//改变绑定好数据的行的id
                    row.appendTo("#datas");//添加到模板的容器中
                });

Dies ist die AJAX-Methode von jQuery. Sie erklärt hauptsächlich, wie die Daten auf der Seite gemäß der Definition angezeigt werden die Vorlage. Das erste ist: „var row = $(“#template“).clone();“ Kopieren Sie zuerst die Vorlage und dann row.find(“#OrderID“).text(n. order ID);, was darauf hinweist, dass dies der Fall ist wird gefunden Für das Tag mit id=OrderID setzen Sie dessen innerText auf die entsprechenden Daten. Natürlich kann er auch auf Daten im HTML-Format gesetzt werden. Oder konvertieren Sie die Daten über externe Funktionen in das erforderliche Format, wie zum Beispiel hier row.find("#OrderDate").text(ChangeDate(n. order date)); Es fühlt sich ein bisschen an wie ein Serversteuerelement, das Vorlagenbindungsdaten ausführt.
All dies wird auf einer statischen Seite platziert und Daten werden nur aus dem Hintergrund über die AJAX-Methode abgerufen. Alle HTML-Codes lauten wie folgt:

    
    
    


    

         

            

            
             
            <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
                <tr>
                    <th>
                        订单ID</th>
                    <th>
                        客户ID</th>
                    <th>
                        雇员ID</th>
                    <th>
                        订购日期</th>
                    <th>
                        发货日期</th>
                    <th>
                        货主名称</th>
                    <th>
                        货主地址</th>
                    <th>
                        货主城市</th>
                    <th>
                        更多信息</th>
                </tr>
                <tr id="template">
                    <td id="OrderID">
                    </td>
                    <td id="CustomerID">
                    </td>
                    <td id="EmployeeID">
                    </td>
                    <td id="OrderDate">
                    </td>
                    <td id="ShippedDate">
                    </td>
                    <td id="ShippedName">
                    </td>
                    <td id="ShippedAddress">
                    </td>
                    <td id="ShippedCity">
                    </td>
                    <td id="more">
                    </td>
                </tr>
            </table>
        
        

            LOADING....
        
        
    

PageData.js enthält die obige AJAX-Anfrage und Bindung Die js, die den Datencode definieren, verwenden nicht einmal das Formular auf der gesamten Seite. Welchen Vorteil hat dies? Schauen Sie sich die folgende Vorlage an

         <ul id="datas">
                <li id="template">
                    <span id="OrderID">
                        fsdfasdf
                    </span>
                    <span id="CustomerID">
                    </span>
                    <span id="EmployeeID">
                    </span>
                    <span id="OrderDate">
                    </span>
                    <span id="ShippedDate">
                    </span>
                    <span id="ShippedName">
                    </span>
                    <span id="ShippedAddress">
                    </span>
                    <span id="ShippedCity">
                    </span>
                    <span id="more">
                    </span>
                </li>
            </ul>

und achten Sie dennoch auf das id-Attribut. Jeder sollte verstehen, nachdem er dies gesehen hat, dass die Daten unabhängig von der verwendeten Ausdrucksform an den entsprechenden Speicherort gebunden werden können, solange das ID-Attribut gleich ist. In diesem Fall werden diejenigen von uns, die Programmierer sind, den Code aufgrund der Änderung des Künstlers nicht ändern, und der Künstler muss nur HTML erstellen, und es besteht keine Notwendigkeit, Vorlagen für die Serversteuerung zu erstellen (aber ich bin nicht darauf gestoßen). So ein Künstler. Sie sind alle vom Künstler entworfen und ich werde sie in Serversteuerungsvorlagen umwandeln.

Ausführlichere Erläuterungen zur asynchronen Verarbeitung von Json-Daten durch jQuery Ajax finden Sie auf der chinesischen PHP-Website!