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

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还是get，url是数据提交给服务器的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.)；

jQuery的ajax分页流程：

步骤：

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

2、 给项目添加struts能力；

3、 配置web.xml和struts.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代码，用jQuery的ajax功能实现分页显示；

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

9、 在userlist.jsp页面编写回调函数，显示数据到当前页面；

userlist.jsp中的javascript代码

10、添加上一页，下一页，实现分页能力；

userlist.jsp添加的分页内容

测试：运行项目