jQuerys integrierte AJAX-Funktion und JSON-Nutzungsbeispiele_jquery

Verwenden Sie die integrierte AJAX-Funktion von jQuery, um direkt auf den Hintergrund zuzugreifen, um Daten im JSON-Format abzurufen, und binden Sie die Daten dann über jQuer an die vorgefertigte HTML-Vorlage und zeigen Sie sie direkt auf der Seite an.
Werfen wir zunächst einen Blick auf die HTML-Vorlage:

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

Was Sie beachten müssen, sind alle darin enthaltenen ID-Attribute, dies ist ein Schlüssel. Werfen wir einen Blick auf den Code für die AJAX-Anfrage und Datenbindung

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

Dies ist die AJAX-Methode von jQuery. Die zurückgegebenen Daten sind nicht kompliziert. Sie erklären hauptsächlich, wie die Daten auf der Seite gemäß der Definition der Vorlage angezeigt werden. Das erste ist: „var row = $(“#template“).clone();“ Kopieren Sie zuerst die Vorlage und dann row.find(“#OrderID“).text(n. order ID);, was darauf hinweist, dass dies der Fall ist wird gefunden Für das Tag mit id=OrderID setzen Sie dessen innerText auf die entsprechenden Daten. Natürlich kann er auch auf Daten im HTML-Format gesetzt werden. Oder konvertieren Sie die Daten über externe Funktionen in das erforderliche Format, wie zum Beispiel hier row.find("#OrderDate").text(ChangeDate(n. order date)); Es fühlt sich ein bisschen an wie ein Serversteuerelement, das Vorlagenbindungsdaten ausführt.
All dies wird auf einer statischen Seite platziert und Daten werden nur über die AJAX-Methode aus dem Hintergrund abgerufen. Alle HTML-Codes lauten wie folgt:

 




 
<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 ist das js, das den oben genannten AJAX-Anforderungs- und Datenbindungscode enthält. Die gesamte Seite verwendet nicht einmal ein Formular. Welche Vorteile hat dies? Schauen Sie sich die folgende Vorlage an

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

Achten Sie auch auf das id-Attribut. Jeder sollte verstehen, nachdem er dies gesehen hat, dass die Daten unabhängig von der verwendeten Ausdrucksform an den entsprechenden Speicherort gebunden werden können, solange das ID-Attribut gleich ist. In diesem Fall werden diejenigen von uns, die Programmierer sind, den Code aufgrund der Änderung des Künstlers nicht ändern, und der Künstler muss nur HTML erstellen, und es besteht keine Notwendigkeit, Vorlagen für die Serversteuerung zu erstellen (aber ich bin nicht darauf gestoßen). So ein Künstler. Sie wurden alle vom Künstler entworfen und ich werde sie in Serversteuerungsvorlagen umwandeln.

Lassen Sie uns kurz über das Backend der Northwind-Datenbank sprechen, die in der DataTable platziert und dann über DataTable2JSON in das JSON-Datenformat konvertiert und zurückgesendet wird im Backend. Ich hoffe, dass sie Anfängern hilfreich sein wird.