jQueryの詳しい解説 Json data_jqueryのAjax非同期処理-jsチュートリアル-php.cn

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

$("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 データ内の名前フィールド データを表示します: 

コードをコピーします

コードは次のとおりです:

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

asp.net インスタンス

まず、転送する json データを指定します: [{"demoData":"This Is The JSON Data"}]
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 オブジェクトデータとして扱いませんが、処理されます。文字列として、次のコードを入力します

コードをコピーしますコードは次のとおりです:$ .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 メソッド コード 

コードは次のとおりです:

[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 メソッドを通じてバックグラウンドからのみ取得されます。

コードをコピーします。コードは次のとおりです:

    test1

            value=" < " /> value=" >> " />

読み込み中.. ..

< /html>

PageData.js には、上の AJAX 要求とデータコードの決定が含まれる js が含まれており、全体的なフォームは使用されず、非常に優れた機能が備わっています。

复制代码代码如下:

 
 fsdfasdf
 < ;/span>
 
 ;span id="注文日">
 
 lt;/ul>

も注意すべき id プロパティです。この説明は、どのような形式であっても、id プロパティが同じであれば、データを対応する位置に特定できることを示しています。，我们这これら做程序的就不不会因為美工的修改而修改码了，而して美工也只要做出html就可了，不需要是服务器控件做模板（不过我还没遇到过这样的美工，都是美工設計は、サーバーコントローラーのモールドを変更することに同意しました）。