孙仁鹏+刘富国

摘 要：有刷新分页需要回传整个页面，用户体验效果差。原生AJAX实现无刷新分页，难度高，代码复杂，且有浏览器兼容和不便解析JSON数据问题。为了解决不足，提出使用JQuery实现无刷新分页。首先分析了有刷新和无刷新的工作原理，然后结合多关键字组合搜索，阐述分页的核心实现思路，同时利用JSON提升网络传输效率和简化数据解析，利用数据库端物理分页提高分页性能。实践表明，研究具有较好的实用价值。

关键词：JQuery；多关键字；无刷新；物理分页；JSON

中图分类号：TP311 文献标识码：A

Abstract：With refreshing paging techniques，the entire page needs to be posted back and the user experience is poor.Native AJAX implements non-refreshing paging with many problems，like high difficulty，complexity code，poor browser compatibility and inconvenience for parsing JSON data.In order to solve the problems，the paper proposes to achieve non-refreshing paging through JQuery.The operating principles of refreshing and non-refreshing are analyzed in the first place，and then the core implementation thoughts of paging are explained with the multi-keyword combination search.By adopting JSON，the network transmission efficiency is enhanced and the data analysis is simplified.The paging performance is improved through physical paging on the database.Practice has proved the high practical value of the scheme.

Keywords：JQuery；multi-keyword；non-refreshing；physical paging；JSON

1 引言（Introduction）

数据分页展示，是web编程常用的一项技术。有刷新分页会重新加载整个页面，用户体验较差；原生AJAX实现无刷新分页，解决了用户体验差的问题，但是存在代码量大、实现难度高、浏览器兼容和数据解析不便等问题[1-3]。在实际的企业应用中，还往往需要结合多关键字组合查询，利用json/xml等数据格式进行数据传输。所以，研究JQuery的AJAX分页实现，提高用户体验和提升分页性能，简化代码，显得尤为必要。

2 原理介绍（Principle introduction）

2.1 有刷新分页

用户每次点击上一页或下一页向web服务器发送http请求时，服务器接收处理后都会回传整个页面数据。这种处理模式浪费了网络带宽，因为在请求前后两个页面中的大部分html代码往往是相同的。并且查询关键字、页面总数、当前页、返回的数据都将放置在session或request内置对象中，增加服务器内存压力。

2.2 无刷新分页

当用户点击上一页或下一页时，使用客户端对象XMLHttpRequest发送异步请求，服务器响应之后再把局部变化的数据返回给客户端。因为请求和响应是异步的，因此服务器无须回传整个页面数据，能在不刷新页面的前提下维护数据。这样，查询关键字、页面总数和当前页就无须放置在session中，只需放在当前页JQuery代码中，同时请求和响应的数据用json格式封装，减少了服务器内存的占用和减轻了网络负荷[4]。

2.3 JQuery无刷新分页

原生AJAX的无刷新是使用复杂且难以理解的JavaScript来实现异步，不同的浏览器对AJAX的实现也不相同，而JQuery只需要一行简单的代码，就可以实现AJAX功能。JQuery能够使用Http Get和Http Post从远程服务器上请求文本、HTML、XML或JSON，同时能够方便地把这些外部数据直接载入网页的被选元素中。JSON比XML更小、更快，更易解析，原生Ajax不支持。在JQuery无刷新技术的基础上，运用多关键字组合来增强查询能力、实现功能更为强大的“多关键字组合无刷新分页技术”[5]。

3 代码实现（Code implementation）

3.1 多关键字组合

采用sql动态拼接的方式实现。WHERe 1=1是为了方便在sql语句后面持续的添加条件，“！"".equals（sex）”是sql拼接查询条件的判断，页面传递过来的关键字值为空川则在查询条件中就拼接不到该关键字，关键字值都为空串則查询全部[6，7]。

//sql动态拼接关键代码

String sql="SELECt username，sex，grade FROM`user`WHERe 1=1"；

if （！"".equals（sex））sql+=.jpg" >

sql+="LIMIT"+（pageNum-1）*10+"，10"；endprint

3.2 根据多关键字组合作为条件，JQuery异步加载查询

总页数

根据多条件关键字，JQuery异步调用web端组件查询总页数，异步回调来接收并解析返回的数据，然后清空旧页码显示，并将新的总页数通过id载入网页的被选元素中。异步调用的参数：“type”表示get或post提交方式，“url”表示提交的服务器端请求的地址，“data”表示携带的参数，“dataType”表示服务器返回的数据类型，“success”表示请求成功后的回调函数，“error”表示请求失败后的回调参数[8]。

//输入多关键字条件，点击查询

$（"#query"）.click（function（）{

username=$（"#username"）.val（）；//获取姓名值

sex=$（"#sex"）.val（）；//获取性别值

grade=$（"#grade"）.val（）；//获取班级值

getQuery（username，sex，grade，1）；//使用多关键字查询第一页内容

$.ajax（{

type："post"，//post方式提交

url："/QueryServlet"，//url请求路径

data： "action=getPageSum&username="+username+"&sex="+sex+"&grade="+grade，//调用QueryServlet中的getPageSum方法，并把关键字作为参数提交，最终获取页面的总页数

dateType："text"，//返回数据为text格式

success：function（data）{

pageNum=data.toString（）；//得到页面的页数

$（"#pageNum"）.html（""）；//清空前端123…页码显示

for （var i=1； i