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

页面导航:首页 > 网络编程 > JavaScript > jQuery+AJAX+Struts实现无刷新分页

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

来源: 作者: 时间:2016-02-02 09:58 【

jQuery+AJAX+Struts实现无刷新分页说明:1.需要jQuery插件js文件;2.使用myeclipse添加struts能力;从前从客户端页面向服务器发送Ajax请求,需要在js中先创建XMLHttpRequest对象,对象创建好以后

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、 新建两个页面,一个为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添加的分页内容

\

\\

测试:运行项目

 

\\\

 

 

Tags:

相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <