jQuery の組み込み AJAX 関数と JSON の使用例 example

jQuery の組み込み AJAX 関数と JSON の使用例 example_jquery

WBOY

リリース： 2016-05-16 16:41:08

オリジナル

1575 人が閲覧しました

jQuery の組み込み AJAX 機能を使用して、バックグラウンドに直接アクセスして JSON 形式のデータを取得し、jQuer を通じて事前に設計された HTML テンプレートにデータをバインドし、ページに直接表示します。
まず 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>
<td id="ShippedAddress">
</td>
<td id="ShippedCity">
</td>
<td id="more">
</td>
</tr>
</table>

ログイン後にコピー

注意しなければならないのは、内部のすべての id 属性です。これはキーです。 AJAX リクエストとデータバインディングのコードを見てみましょう

$.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&#63;id=" + n.订单ID + "&pageindex="+pageIndex+"> More</a>"); 
row.attr("id","ready");//改变绑定好数据的行的id
row.appendTo("#datas");//添加到模板的容器中
});

ログイン後にコピー

これは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 コードは次のとおりです。




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

ログイン後にコピー

PageData.js は、上記の AJAX リクエストとデータバインディングコードを含む js です。これを行うことの利点は何ですか。次のテンプレートをご覧ください

<ul id="datas">
<li id="template">
<span id="OrderID">
fsdfasdf
</span>
<span id="CustomerID">
</span>
<span id="EmployeeID">
</span>
<span id="OrderDate">
</span>
<span id="ShippedDate">
</span>
<span id="ShippedName">
</span>
<span id="ShippedAddress">
</span>
<span id="ShippedCity">
</span>
<span id="more">
</span>
</li>
</ul>

ログイン後にコピー

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

AJAX リクエストのバックエンドについて簡単に説明します。注文テーブルは DataTable に配置され、DataTable2JSON を通じて JSON データ形式に変換されて送信されます。ただし、一部のページングとキャッシュが使用されます。バックエンドのメソッドについて、初心者の方のお役に立てれば幸いです。