JQuery实现局部页面动态刷新
今天遇到这个问题,解决了,分享一下。
其实这个问题很常见,比如说,评论提交后,自动刷新,但不是整个页面刷新。之前有一种解决方法,就是采用HTML的iframe标签,通过触发事件修改src属性的值。
下面有两种方法,第一种不需要和服务器交互,第二种是和服务器交互。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>JQuery局部页面动态刷新</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function() { <!--直接载入页面--> var comment = $('#comment');$('#refresh').click(function() { comment.children().remove(); comment.load('comment.html #comment');//用法参考jQuery的load函数 }); <!--与服务器进行交互--> var comment = $('#comment');$('#refresh').click(function() { dynamicData('comment'); });function dynamicData(param) {comment.children().remove();$.ajax({type: 'POST',url:'/comment_servlet',//java中的Servlet路径data: 'page='+param,success: function(result) {//回调函数,result与上面load参数的类似,可以是jsp文件的路径comment.load(result);}});}});</script></head><body><input type="button" id="refresh" value="局部刷新" /><div id="comment"></div></body></html>