当前位置: 首页 > 猎奇 > 济南网站建设关键字分页JQuer!基于JQuer多关键字组合无刷新分页技术的实现

济南网站建设关键字分页JQuer!基于JQuer多关键字组合无刷新分页技术的实现

时间:2018-02-21 06:31本文链接:http://www.kejitianxia.com/526743.html

导读:本论文为您写关键字分页JQuer毕业论文范文和职称论文提供相关论文参考文献, 济南建网站公司,可免费下载。

关键词:JQuery;多关键字;无刷新;物理分页;JSON

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

Implementation of the Non-Refreshing Paging Technique

Based on the JQuery Multi-Keyword Combination

SUN Renpeng,LIU Fuguo

(Institute of Computing &, Software,Nanjing College of Information Technology,Nanjing 210023,China)

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内置对象中,增加服务器内存压力.

图1 有刷新分页原理

Fig.1 Refresh paging principle

2 2 无刷新分页

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

图2 无刷新分页原理

Fig.2 No refresh paging principle

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+等于" AND sex等于"+sex,{等}

sql+等于"LIMIT"+(pageNum-1)*10+",10",

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请求路径

本文相关推荐

相关文章

声明:本网部分信息转载于其他网站,如稿件涉及版权等问题,请联系我们处理!email:2791765781@qq.com

济南助企网络科技有限公司 www.zhuqikeji.cn 济南网站建设 济南网站制作

备案号:鲁ICP备14023395号