jQueryの詳しい解説 Json data_jqueryのAjax非同期処理

まず公式の例を見てみましょう
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 データ内の名前フィールド データを表示します:

コードをコピーします


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

$.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 テンプレートを見てみましょう:

コードをコピーします


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

  <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>
シティ">

注意しなければならないのは、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 メソッドを通じてバックグラウンドからのみ取得されます。

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

<!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>
            <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="注文ID">
</td>
<td id="顧客ID">
</td>
</td>
<td id="注文日">
</td>
<td id="発送日">
</ td>
<td id="発送先名">

<td id="発送先住所"&g t;
</td>
<td id="ShippedCity">
</td>
<td id="more">
</td>
</tr>
</ table>
</div>
<div id="load" style="left: 0px;position:Absolute; top: 0px; background-color: red">
読み込み中.. ..
</div>
<input type="hidden" id="pagecount" />
</div>
</body>
< /html>

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

复制代码代码如下:

<ul id="datas">
<li id="template">
<span id="OrderID">
fsdfasdf
&lt ;/span>
<span id="顧客ID">
</span>
<span id="従業員ID">
</span>

;span id="注文日">
</span>
<span id="発送日">
</span& gt;
<span id="発送名"&gt ;
</span>
<span id="発送先住所">
</span>
<span id="ShipedCity">
</span> ;
<span id="more">
</span>
</li>
lt;/ul>

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