码迷,mamicode.com
首页 > Web开发 > 详细

jQuery+AJAX+Struts实现无刷新分页

时间:2015-04-13 19:07:15      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:jquery   struts   ajax   分页   web   

jQuery+AJAX+Struts实现无刷新分页

说明:

1.需要jQuery插件js文件;

2.使用myeclipse添加struts能力;

从前从客户端页面向服务器发送Ajax请求,需要在js中先创建XMLHttpRequest对象,对象创建好以后使用OPEN‘GET/POST‘,URL,同步/异步)设置提交方式,URL地址,使用同步还是异步方式。然后使用send(data)向服务器发送数据,同时使用onreadystatechange来绑定回调函数。如果是使用GET方式提交数据,那么就直接在URL地址中拼接数据,如果是使用POST方式要先设置请求头setRequestHeader("Content-Type","application/x-www-form-urlencodeed"),然后再使用send()方法发送数据。在回调函数里面还要对readyState进行判断看当前状态是否已经完成(readyState=4),以及服务器是否成功返回(status=200,然后再做相应的处理。整过过程显得很麻烦,而且创建的XMLHttpRequest还会根据浏览器的不同而不同,显得很麻烦。

使用了jQuery为我们提供的ajax(option)就非常方便了,只需要这样做就可以了:

$.ajax({
   type: "POST",
   url: "RegService.do",
   data: "name=John&location=Boston",
   dataType:'json',
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

type是指定提交数据的方式是post还是geturl是数据提交给服务器的URL地址,data是提交给服务器的数据,如果是get方式还可以在URL地址中拼接,dataType表示服务器返回的数据按什么组织,success表示数据成功返回时的回调函数。还可以使用jQuery.get(url,[data],[callback])这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。jQuery.getJSON(url,[data],[callback])通过 HTTP GET 请求载入 JSON 数据。jQuery.post(url,[data],[callback])这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。jQuery.getScript(url,[callback])通过 HTTP GET 请求载入并执行一个 JavaScript 文件。如:$.getScript("test.js",function(){

 alert("Script loaded and executed.");


jQueryajax分页流程:

技术分享



步骤:

1、 myeclipse下新建一个web项目;

技术分享

2、 给项目添加struts能力;

技术分享


3、 配置web.xmlstruts.xml配置文件;

struts.xml配置

技术分享

web.xml配置:struts部分可以自动生成

技术分享

4、 新建两个jsp页面,一个为index.jsp,一个为userlist.jsp

技术分享


5、 编写index页面,在body做初始化操作,并添加一个a标签跳转到userlist.jsp

技术分享


indexOnload()函数在index.js

技术分享


onlineAjax()方法在ajax.js

技术分享

sendJqueryAjax()方法在jqueryAjax.js里面

技术分享

BaseAction.java核心内容

技术分享


6、 编写userlist.jsp页面,添加数据显示的table和其他内容;

技术分享


7、编写js代码,用jQueryajax功能实现分页显示;

技术分享

8、 新建一个action作为ajax请求的URL地址;

技术分享技术分享


9、 userlist.jsp页面编写回调函数,显示数据到当前页面;

userlist.jsp中的javascript代码

技术分享

10、添加上一页,下一页,实现分页能力;

userlist.jsp添加的分页内容

技术分享

技术分享技术分享

测试:运行项目      


技术分享技术分享技术分享


源码下载地址:http://download.csdn.net/detail/dream_angel_z/8590497


jQuery+AJAX+Struts实现无刷新分页

标签:jquery   struts   ajax   分页   web   

原文地址:http://blog.csdn.net/dream_angel_z/article/details/45028265

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!