JQuery实现局部页面动态刷新

最新推荐文章于 2024-04-09 16:29:43 发布

qq1978366308

最新推荐文章于 2024-04-09 16:29:43 发布

阅读量2.2w

点赞数 3

分类专栏： web

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

转自：http://maylian7700-126-com.iteye.com/blog/847486

其实这个问题很常见，比如说，评论提交后，自动刷新，但不是整个页面刷新。之前有一种解决方法，就是采用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>

qq1978366308

关注

3
点赞
踩
22

收藏

觉得还不错? 一键收藏
1
评论
JQuery实现局部页面动态刷新

转自：http://maylian7700-126-com.iteye.com/blog/847486 其实这个问题很常见，比如说，评论提交后，自动刷新，但不是整个页面刷新。之前有一种解决方法，就是采用HTML的iframe标签，通过触发事件修改src属性的值。下面有两种方法，第一种不需要和服务器交互，第二种是和服务器交互。 &lt;!DOCTYPE html PUBLIC "-/...
复制链接

扫一扫