Explication détaillée du traitement asynchrone jQuery Ajax des données Json

Regardons d'abord un exemple officiel
Utilisez la requête AJAX pour obtenir des données JSON et afficher le résultat :

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

Cette fonction est l'abréviation de fonction Ajax, qui équivaut à :

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

Les données envoyées au serveur peuvent être ajoutées à l'URL sous forme de chaîne de requête. Si la valeur du paramètre data est un objet (carte), elle est convertie en chaîne et codée en URL avant d'être ajoutée à l'URL.
Les données de retour transmises au rappel peuvent être un objet JavaScript ou un tableau défini dans une structure JSON, et sont analysées à l'aide de la méthode $.parseJSON().
Chargez les données JSON depuis test.js et affichez les données d'un champ de nom dans les données JSON :

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

Une instance asp.net
Donnez d'abord les données json à transmettre : [{ " demoData":"Ceci sont les données JSON"}]
1, utilisez une page aspx ordinaire pour les traiter
Je pense que cette méthode est la plus simple à traiter, regardez le code ci-dessous

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

Voici le code pour transmettre des données en arrière-plan

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

Cette méthode de traitement analysera directement les données transmises en données json, ce qui signifie que le code js frontal ici peut directement convertir les données analysées dans les données d'objet json au lieu de données de chaîne, telles que data[0].demoData, ces données d'objet json sont utilisées directement ici
2, et le service Web (asmx) est utilisé pour traiter
Cette méthode de traitement n'est pas passée les données seront traitées comme des données d'objet json, mais comme une chaîne, comme indiqué ci-dessous

$.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);     
}     
});

Voici le code de la méthode asmx

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

ici Cette méthode de traitement traite les données json transmises sous forme de chaîne. Ces données doivent être évaluées afin qu'elles puissent devenir de véritables données d'objet json
Jetons d'abord un coup d'œil au modèle HTML :

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

Ce à quoi vous devez faire attention. est tous les attributs d'identification à l'intérieur, c'est une clé. Jetons un coup d'œil au code de la requête AJAX et de la liaison de données

    $.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");//添加到模板的容器中
                });

Il s'agit de la méthode AJAX de jQuery. Le retour des données n'est pas compliqué. Il explique principalement comment afficher les données sur la page selon la définition de. le modèle. Le premier est ce "var row = $("#template").clone();" copiez d'abord le modèle, puis row.find("#OrderID").text(n. order ID);, indiquant qu'il est trouvé Pour la balise avec id=OrderID, définissez son innerText sur les données correspondantes. Bien entendu, il peut également être défini sur des données au format HTML. Ou convertissez les données au format requis via des fonctions externes, comme ici row.find("#OrderDate").text(ChangeDate(n. Order Date)); Cela ressemble un peu à un contrôle serveur effectuant des données de liaison de modèle.
Tous ces éléments sont placés dans une page statique et les données sont obtenues uniquement à partir de l'arrière-plan via la méthode AJAX. Tous les codes html sont les suivants :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>test1</title>
    <script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script>
    <script language="javascript" type="text/javascript" src="js/PageDate.js"></script>
</head>
<body>
    <div>
         <div>
            <br />
            <input id="first" type="button" value="  <<  " /><input id="previous" type="button"
                value="  <  " /><input id="next" type="button" value="  >  " /><input id="last" type="button"
                    value="  >>  " />
             <span id="pageinfo"></span>
            &lt;table id=&quot;datas&quot; border=&quot;1&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse: collapse&quot;&gt;
                &lt;tr&gt;
                    &lt;th&gt;
                        订单ID&lt;/th&gt;
                    &lt;th&gt;
                        客户ID&lt;/th&gt;
                    &lt;th&gt;
                        雇员ID&lt;/th&gt;
                    &lt;th&gt;
                        订购日期&lt;/th&gt;
                    &lt;th&gt;
                        发货日期&lt;/th&gt;
                    &lt;th&gt;
                        货主名称&lt;/th&gt;
                    &lt;th&gt;
                        货主地址&lt;/th&gt;
                    &lt;th&gt;
                        货主城市&lt;/th&gt;
                    &lt;th&gt;
                        更多信息&lt;/th&gt;
                &lt;/tr&gt;
                &lt;tr id=&quot;template&quot;&gt;
                    &lt;td id=&quot;OrderID&quot;&gt;
                    &lt;/td&gt;
                    &lt;td id=&quot;CustomerID&quot;&gt;
                    &lt;/td&gt;
                    &lt;td id=&quot;EmployeeID&quot;&gt;
                    &lt;/td&gt;
                    &lt;td id=&quot;OrderDate&quot;&gt;
                    &lt;/td&gt;
                    &lt;td id=&quot;ShippedDate&quot;&gt;
                    &lt;/td&gt;
                    &lt;td id=&quot;ShippedName&quot;&gt;
                    &lt;/td&gt;
                    &lt;td id=&quot;ShippedAddress&quot;&gt;
                    &lt;/td&gt;
                    &lt;td id=&quot;ShippedCity&quot;&gt;
                    &lt;/td&gt;
                    &lt;td id=&quot;more&quot;&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
        </div>
        <div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red">
            LOADING....
        </div>
        <input type="hidden" id="pagecount" />
    </div>
</body>
</html>

PageData.js inclut la requête AJAX ci-dessus. et la liaison Le js qui définit le code des données n'utilise même pas le formulaire sur toute la page. Quel est l'avantage de faire cela ? Regardez le modèle suivant

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

et faites toujours attention à l'attribut id. Après avoir vu cela, tout le monde devrait comprendre que quelle que soit la forme d'expression utilisée, tant que l'attribut id est le même, les données peuvent être liées à l'emplacement correspondant. Dans ce cas, ceux d'entre nous qui créent des programmes n'auront pas à modifier le code en raison de la modification de l'artiste, et l'artiste n'a qu'à créer du HTML, et il n'est pas nécessaire de créer des modèles pour les contrôles du serveur (mais j'ai pas rencontré un tel artiste, ils sont tous conçus par l'artiste et je vais les changer en modèles de contrôle serveur).

Pour des explications plus détaillées sur le traitement asynchrone jQuery Ajax des données Json, veuillez faire attention au site Web PHP chinois !