JQuery实现局部页面动态刷新

最新推荐文章于 2023-01-29 10:00:43 发布

maylian7700

最新推荐文章于 2023-01-29 10:00:43 发布

阅读量1k

点赞数

文章标签： jQuery Ajax Servlet HTML JSP ViewUI

本文链接：https://blog.csdn.net/maylian7700/article/details/83799222

版权

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

maylian7700

关注

0
点赞
踩
1

收藏

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

今天遇到这个问题，解决了，分享一下。其实这个问题很常见，比如说，评论提交后，自动刷新，但不是整个页面刷新。之前有一种解决方法，就是采用HTML的iframe标签，通过触发事件修改src属性的值。下面有两种方法，第一种不需要和服务器交互，第二种是和服务器交互。[code="html"]JQuery局部页面动态刷新$(document...
复制链接

扫一扫