jQuery、JSON结合
日期：2014-05-16 浏览次数：20319 次
通过AJAX异步减少网络内容传输，而JSON则可以把传输内容缩减到纯数据；然后利用jQuery内置的AJAX功能直接获得JSON格式的数据；在客户端直接绑定到数据控件里面，从而达到最优。
1.设计htm页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test2</title>
<script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script>
<script language="javascript" type="text/javascript" src="js/PageDate.js"></script>
</head>
<body>
<div>
?? <div>
??? <br />
??? <input id="first" type="button" value=" << " /><input id="previous" type="button"
???? value=" < " /><input id="next" type="button" value=" > " /><input id="last" type="button"
????? value=" >> " />
??? <span id="pageinfo"></span>
??? <ul id="datas">
???? <li id="template">
????? <span id="OrderID">
?????? 订单ID
????? </span>/
????? <span id="CustomerID">
????? 客户ID
????? </span>
????? <span id="EmployeeID">
????? 雇员ID
????? </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>
?? </div>
?? <div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red">
??? LOADING....
?? </div>
?? <input type="hidden" id="pagecount" />
</div>
</body>
</html>
注：ID属性比较重要，用于数据绑定。
2.使用jQuery编写AJAX请求文件
var pageIndex = 1
var pageCount = 0;
??? $(function(){
?? GetPageCount();//取得分页总数
?? pageCount = parseInt($("#pagecount").val());//分页总数放到变量pageCount里
?? $("#load").hide();//隐藏loading提示
??????? $("#template").hide();//隐藏模板
?? ChangeState(0,1);//设置翻页按钮的初始状态
???????
??????? bind();//绑定第一页的数据
???????
??????? //第一页按钮click事件
??????? $("#first").click(function(){
??????????? pageIndex = 1;
??????????? ChangeState(0,1);
??????????? bind();???
??????? });
???????
??????? //上一页按钮click事件
??????? $("#previous").click(function(){
??????????? pageIndex -= 1;
??????????? ChangeState(-1,1);???????????
??????????? if(pageIndex <= 1)
??????????? {
??????????????? pageIndex = 1;
??????????????? ChangeState(0,-1);
??????????? }
??????????? bind();???
??????? });
??????
??????? //下一页按钮click事件
??????? $("#next").click(function(){
??????????? pageIndex += 1;
??????????? ChangeState(1,-1);
??????????? if(pageIndex>=pageCount)
??????????? {
??????????????? pageIndex = pageCount;
??????????????? ChangeState(-1,0);
??????????? }
??????????? bind(pageIndex);???????????
??????? });
???????
??????? //最后一页按钮click事件
??????? $("#last").click(function(){
??????????? pageIndex = pageCount;
??????????? ChangeState(1,0);
??????????? bind(pageIndex);???????????
??????? });???????????????
??? });
???
??? //AJAX方法取得数据并显示到页面上
??? function bind()
??? {
??????? $("[@id=ready]").remove();
??????? $("#load").show();
??????? $.ajax({
??????????? type: "get",//使用get方法访问后台
??????????? dataType: "json",//返回json格式的数据
??????????? url: "Handler.ashx",//要访问的后台地址
??????????? data: "pageIndex=" + pageIndex,//要发送的数据
??????????? complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
??????????? success: function(msg){//msg为返回的
