欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JQuery实现局部页面动态刷新

程序员文章站 2022-06-17 11:57:04
...
今天遇到这个问题，解决了，分享一下。
其实这个问题很常见，比如说，评论提交后，自动刷新，但不是整个页面刷新。之前有一种解决方法，就是采用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>
相关标签： jQuery Ajax Servlet HTML JSP

上一篇： 九节虾是什么虾？它与斑节虾有什么区别？

下一篇： 苹果拟进军移动支付 谷歌发力人工智能

推荐阅读