ホームページ > 記事 > ウェブフロントエンド > jQueryの詳しい解説 Json data_jqueryのAjax非同期処理
jQueryの詳しい解説 Json data_jqueryのAjax非同期処理
- WBOYオリジナル
- 2016-05-16 17:17:24992ブラウズ
まず公式の例を見てみましょう
AJAX リクエストを使用して JSON データを取得し、結果を出力します:
Copy code Code As
$("button").click(function(){
$.getJSON("demo_ajax_json.js",function(result){
$.each(result) 、関数(i, フィールド){
🎜>この関数は、
コードをコピー
コードは次のとおりです。
$.ajax({ url: url, data: data, success: callback, dataType: json
});サーバーへのデータの送信は、クエリ文字列として URL に追加できます。 data パラメーターの値がオブジェクト (マップ) の場合、URL に追加される前に文字列に変換され、URL エンコードされます。
コールバックに渡される戻りデータは、JavaScript オブジェクトまたは JSON 構造で定義された配列であり、$.parseJSON() メソッドを使用して解析されます。
test.js から JSON データをロードし、JSON データ内の名前フィールド データを表示します:
コードをコピーします
コードは次のとおりです: asp.net インスタンス
まず、転送する json データを指定します: [{"demoData":"This Is The JSON Data"}]
1,通常の aspx ページを使用します
この方法が最も扱いやすいと思います。以下のコードを見てください
1,通常の aspx ページを使用します
この方法が最も扱いやすいと思います。以下のコードを見てください
コードをコピー
コードは次のとおりです:
$.ajax({ url: "Default.aspx", dataType: "json", success: function (data) { }、
エラー：function（xmlhttprequest、textStatus、errorthrown）{}）;
バックグラウンドでデータを送信するためのコードは次のとおりです
Response.Write("[{"demoData":"これは JSON データです"}]"); .End();
この処理メソッドは、渡されたデータを json データに直接解析します。つまり、ここでのフロントエンド js コードは、データを文字列データではなく json オブジェクト データに直接解析する可能性があります。 data [0].demoData など、この json オブジェクト データはここで直接使用されます
2、Web サービス (asmx) は の処理に使用されます。この処理メソッドは渡されたデータを json オブジェクト データとして扱いませんが、処理されます。文字列として、次のコードを入力します
コードをコピーします
コードは次のとおりです:
バックグラウンドでデータを送信するためのコードは次のとおりです
コードをコピーします コードは次のとおりです:
Response.Write("[{"demoData":"これは JSON データです"}]"); .End();
この処理メソッドは、渡されたデータを json データに直接解析します。つまり、ここでのフロントエンド js コードは、データを文字列データではなく json オブジェクト データに直接解析する可能性があります。 data [0].demoData など、この json オブジェクト データはここで直接使用されます
2、Web サービス (asmx) は
コードをコピーします コードは次のとおりです:$ .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);
//データを変換するには 2 つの方法があります。2 つの処理方法は同じ効果があります。//$("input#showTime").val(eval(data.d) )[0].demoData );
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown); asmx メソッド コード
コードは次のとおりです: dataType: "json",/*この文は使用してもしなくても、影響はありません* /
contentType: "application/json; charset=utf-8",
success: function (data) {
$("input#showTime").val(eval('(' data.d ')')[0 ].demoData);
//データを変換するには 2 つの方法があります。2 つの処理方法は同じ効果があります。//$("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 データは文字列として処理されます。このデータは、
まず HTML テンプレートを見てみましょう: コードをコピーします
コードは次のとおりです:
订单ID | 客户ID | 雇员ID | 订购日期 | 发货日期 | 货主名称 | 货主地址 | 货主城市 | 更多信息 | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
注意しなければならないのは、id 属性内のすべてがキーであるということです。 AJAX リクエストとデータ バインディング コードを見てみましょう コードをコピーします コードは次のとおりです:
$ .ajax({ type: "get",//get メソッドを使用してバックグラウンドにアクセスします データにアクセスしました: "pageIndex=" pageIndex,//データsend complete:function(){$("#load").hide();},//AJAX リクエストが完了したとき 読み込み中のプロンプトを非表示にする success: function(msg){//msg は返されたデータ。ここでデータ バインディングを行います var data = msg.table; $.each(data, function(i, n){ var row = $("#template").clone() ; row.find("#OrderID").text(n.OrderID); row.find(" #CustomerID").text(n.Customer ID); (n. 注文日)); if (n. 配達日! == 未定義) row.find ("#shippeddate"). find("#ShippedName").text(n. 配送業者名); row.find( "#ShippedAddress").text(n.荷主住所); row.find("#ShippedCity"). text(n.荷主都市); row.find("#more").html( "＆lt; a href = orderfo.aspx？id =" n.order id "＆pageindex =" pageindex "; more＆lt; /a＆gt;"）; > これは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 メソッドを通じてバックグラウンドからのみ取得されます。
コードをコピーします。 コードは次のとおりです:
value=" < " /> value=" >> " />
|