Fonction AJAX intégrée de jQuery et exemples d'utilisation de JSON_jquery

Utilisez la fonction AJAX intégrée de jQuery pour accéder directement à l'arrière-plan afin d'obtenir des données au format JSON, puis liez les données au modèle HTML prédéfini via jQuer et affichez-les directement sur la page.
Jetons d'abord un coup d'œil au modèle 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>

Ce à quoi vous devez faire attention, ce sont tous les attributs d'identification à l'intérieur, c'est une clé. Jetons un coup d'œil au code de la requête AJAX et de la liaison de données

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

C'est la méthode AJAX de jQuery. Les données renvoyées ne sont pas compliquées. Elle explique principalement comment afficher les données sur la page selon la définition du modèle. Le premier est ce "var row = $("#template").clone();" copiez d'abord le modèle, puis row.find("#OrderID").text(n. order ID);, indiquant qu'il est trouvé Pour la balise avec id=OrderID, définissez son innerText sur les données correspondantes. Bien entendu, il peut également être défini sur des données au format HTML. Ou convertissez les données au format requis via des fonctions externes, comme ici row.find("#OrderDate").text(ChangeDate(n. order date)); Cela ressemble un peu à un contrôle serveur effectuant des données de liaison de modèle.
Tous ces éléments sont placés dans une page statique et les données sont obtenues uniquement à partir de l'arrière-plan via la méthode AJAX. Tous les codes html sont les suivants :
.

 




 
<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 est le js qui inclut la requête AJAX ci-dessus et le code de liaison de données. La page entière n'utilise même pas de formulaire. Jetez un œil au modèle suivant

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

Faites également attention à l'attribut id. Après avoir vu cela, tout le monde devrait comprendre que quelle que soit la forme d'expression utilisée, tant que l'attribut id est le même, les données peuvent être liées à l'emplacement correspondant. Dans ce cas, ceux d'entre nous qui sont programmeurs ne modifieront pas le code en raison de la modification de l'artiste, et l'artiste n'a qu'à créer du HTML, et il n'est pas nécessaire de créer des modèles pour les contrôles du serveur (mais je n'ai pas rencontré un tel artiste, ils sont tous conçus par l'artiste et je vais les transformer en modèles de contrôle de serveur).

Parlons brièvement du backend de la requête AJAX. La base de données Northwind d'Access est utilisée. La table de commande est placée dans le DataTable, puis convertie au format de données JSON via DataTable2JSON et renvoyée. Cependant, une certaine pagination et mise en cache sont utilisées. dans la méthode backend, j'espère que cela sera utile aux débutants.