Fungsi AJAX terbina dalam jQuery dan examples_jquery penggunaan JSON-tutorial js-php.cn

Fungsi AJAX terbina dalam jQuery dan examples_jquery penggunaan JSON

WBOY

Lepaskan： 2016-05-16 16:41:08

asal

1574 orang telah melayarinya

Gunakan fungsi AJAX terbina dalam jQuery untuk mengakses latar belakang terus untuk mendapatkan data dalam format JSON, dan kemudian mengikat data pada templat html yang telah direka bentuk melalui jQuer dan memaparkannya terus pada halaman.
Mari kita lihat templat html dahulu:

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

Salin selepas log masuk

Apa yang anda mesti beri perhatian ialah semua atribut id di dalamnya, ini adalah kunci. Mari lihat kod untuk permintaan AJAX dan pengikatan data

$.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");//添加到模板的容器中
});

Salin selepas log masuk

Ini ialah kaedah AJAX bagi jQuery Data yang dikembalikan tidak rumit. Ia terutamanya menerangkan cara memaparkan data pada halaman mengikut definisi templat. Yang pertama ialah "baris var = $("#template").clone();" mula-mula salin templat, dan kemudian row.find("#OrderID").text(n. order ID);, menunjukkan bahawa ia ditemui Untuk teg dengan id=OrderID, tetapkan innerTextnya kepada data yang sepadan Sudah tentu, ia juga boleh ditetapkan kepada data dalam format html. Atau tukar data ke dalam format yang diperlukan melalui fungsi luaran, seperti di sini row.find("#OrderDate").text(ChangeDate(n. order date));
Semua ini diletakkan dalam halaman statik, dan data hanya diperoleh dari latar belakang melalui kaedah AJAX Semua kod html adalah seperti berikut:




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

Salin selepas log masuk

PageData.js ialah js yang merangkumi permintaan AJAX di atas dan kod pengikat data Keseluruhan halaman tidak menggunakan borang. Lihat templat berikut

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

Salin selepas log masuk

Juga perhatikan atribut id. Semua orang harus faham selepas melihat ini bahawa tidak kira apa bentuk ungkapan yang digunakan, selagi atribut id adalah sama, data boleh diikat ke lokasi yang sepadan. Dalam kes ini, kami yang menjadi pengaturcara tidak akan mengubah suai kod kerana pengubahsuaian artis, dan artis hanya perlu membuat HTML, dan tidak perlu membuat templat untuk kawalan pelayan (tetapi saya tidak menemui artis sedemikian, Semuanya direka oleh artis dan saya akan menukarnya menjadi templat kawalan pelayan).

Mari kita bercakap secara ringkas tentang bahagian belakang pangkalan data Northwind Access digunakan. Jadual pesanan diletakkan dalam DataTable, dan kemudian ditukar kepada format data JSON melalui DataTable2JSON dan dihantar semula di bahagian belakang Kaedah, saya harap ia akan membantu untuk pemula.