首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

JQuery兑现局部页面动态刷新

2012-10-27 
JQuery实现局部页面动态刷新今天遇到这个问题,解决了,分享一下。其实这个问题很常见,比如说,评论提交后,自

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>

热点排行