ホームページ > 記事 > ウェブフロントエンド > jQuery AjaxによるJsonデータの非同期処理について詳しく解説
まずは公式の例を見てみましょう
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('(' + data.d + ')')[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");//添加到模板的容器中 });
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 を作成するだけでよく、サーバー コントロールのテンプレートを作成する必要もありません (ただし、私はそのようなアーティストには遭遇しませんでした。それらはすべてアーティストによってデザインされており、私はそれらをサーバー制御テンプレートに変更します)。
JsonデータのjQuery Ajax非同期処理のより詳しい説明については、PHPの中国語Webサイトに注目してください。