jQuery AjaxによるJsonデータの非同期処理について詳しく解説-jsチュートリアル-php.cn

jQuery AjaxによるJsonデータの非同期処理について詳しく解説

高洛峰

リリース： 2017-01-12 09:42:57

オリジナル

1116 人が閲覧しました

まずは公式の例を見てみましょう
AJAXリクエストを使用してJSONデータを取得し、結果を出力します:

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

ログイン後にコピー

この関数はAjax関数の略称で、次と同等です:

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

ログイン後にコピー

サーバーに送信されたデータを使用できますURL に追加されるクエリ文字列として。 data パラメーターの値がオブジェクト (マップ) の場合、URL に追加される前に文字列に変換され、URL エンコードされます。
コールバックに渡される戻りデータは、JavaScript オブジェクトまたは JSON 構造で定義された配列であり、$.parseJSON() メソッドを使用して解析されます。
test.js から JSON データをロードし、JSON データ内の名前フィールドデータを表示します:

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

ログイン後にコピー

asp.net の例
まず、転送する JSON データを指定します: [{"demoData":"This Is The JSON Data" "}]
1、通常のaspxページを使用して処理します
この方法が最も処理しやすいと思います。以下のコードを見てください

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

ログイン後にコピー

バックグラウンドでデータを送信するコードです

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

ログイン後にコピー

この処理方法は直接解析します渡されたデータは json データに変換されます。つまり、ここでのフロントエンド js コードは、ここで直接使用されている data[0].demoData などの文字列データではなく、データを json オブジェクトデータに直接解析する可能性があります
。 2、Webサービス(asmx)を使って処理します
この処理メソッドは渡されたデータをjsonオブジェクトデータとして扱うのではなく、文字列として以下のコードを扱います

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

ログイン後にコピー

以下はasmxのメソッドコード

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

ログイン後にコピー

ここでのこの処理メソッドは文字列として渡された json データ。このデータは実際の json オブジェクトデータになるように eval 処理する必要があります。まず HTML テンプレートを見てみましょう。これはキーです。 AJAXリクエストとデータバインディングのコードを見てみましょう

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

ログイン後にコピー

これはjQueryのAJAXメソッドであり、テンプレートの定義に従ってページにデータを表示する方法を主に説明します。 1 つ目は、「var row = $("#template").clone();」で、最初にテンプレートをコピーし、次に row.find("#OrderID").text(n. order ID); であることを示しています。 id=OrderID のタグには、対応するデータを innerText に設定します。もちろん、html 形式のデータを設定することもできます。または、外部関数を通じてデータを必要な形式に変換します。たとえば、 row.find("#OrderDate").text(ChangeDate(n.Order Date)); これは、テンプレートバインディングデータを実行するサーバーコントロールに少し似ています。

これらはすべて静的ページに配置され、データは AJAX メソッドを通じてバックグラウンドからのみ取得されます。すべての HTML コードは次のとおりです。

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

ログイン後にコピー

PageData.js は、上記の AJAX リクエストとデータバインディングコードを含む js です。ページ全体フォームを使用しない場合、使用するメリットは何でしょうか?次のテンプレート




    test1
    
    



    
         
            

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

ログイン後にコピー

を見て、引き続き id 属性に注目してください。これを見れば、どのような表現をしても、id 属性が同じであれば対応する場所にデータをバインドできることが誰でも分かるはずです。この場合、プログラムを作成する側はアーティストの変更によってコードを変更する必要がなく、アーティストは HTML を作成するだけでよく、サーバーコントロールのテンプレートを作成する必要もありません (ただし、私はそのようなアーティストには遭遇しませんでした。それらはすべてアーティストによってデザインされており、私はそれらをサーバー制御テンプレートに変更します）。

jQuery Ajax Json データの非同期処理に関する詳細な記事については、PHP 中国語 Web サイトに注目してください。