jQuery에 내장된 AJAX 함수와 JSON 사용 예제

jQuery에 내장된 AJAX 함수와 JSON 사용 예제_jquery

WBOY

풀어 주다： 2016-05-16 16:41:08

원래의

1513명이 탐색했습니다.

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 방식입니다. 반환되는 데이터는 템플릿의 정의에 따라 페이지에 데이터를 표시하는 방법을 주로 설명합니다. 첫 번째는 "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 데이터 형식으로 변환되어 다시 전송됩니다. 백엔드 메소드에서 초보자에게 도움이 되기를 바랍니다.