无刷新局部加载页面的几种实现思路

最新推荐文章于 2022-07-09 17:31:49 发布

置顶小艺同学啦

最新推荐文章于 2022-07-09 17:31:49 发布

阅读量1.3k

点赞数 2

分类专栏： JS AND JQ入门到入土

本文链接：https://blog.csdn.net/weixin_45861504/article/details/107898934

版权

JS AND JQ入门到入土专栏收录该内容

8 篇文章 2 订阅

订阅专栏

方法一：load局部加载页面

A页面代码部分

<body>
	<a href="B.html" class="list-group-item">跳转</a>
	<div id="main">
		内容显示区域
	</div>
</body>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function() {
		//点击右侧栏触发事件
		$('.list-group-item').on('click', function() {
			var url = $(this).attr('href')
			$('#main').load(url)

			return false
		})
	})
</script>

B页面代码部分

<body>
	<h1>这是B页面</h1>
</body>

方法二：iframe(frame)局部加载页面

<a href="B.html">点击</a>
<iframe src="http://baidu.com/" scrolling="no" name="fram" frameborder="0"></iframe>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		$("a").click(function(){
			$("iframe").attr("src",this.href);
			return false;
		});
	})
</script>

B页面代码部分

<body>
	这是第二个
</body>

方法三：Pjax局部加载页面

<body>
	<a href="B.html">点击</a>
	<div id="container"></div>
</body>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="pjax.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(document).pjax('a[target!=_blank]', '#container', {fragment:'#container', timeout:8000});
	$(document).on('pjax:complete', function() {
		callbank();
	});	
</script>

B页面代码部分

<body>
	<div id="container">
		这是第二个页面内容
	</div>
</body>

在这里插入图片描述

好的总结完毕，最后就是看个人喜好啦~

小艺同学啦

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
无刷新局部加载页面的几种实现思路

方法一：load局部加载页面A页面代码部分<body> <a href="B.html" class="list-group-item">跳转</a> <div id="main"> 内容显示区域 </div></body><script src="jquery.js" type="text/javascript" charset="utf-8"></script><script typ
复制链接

扫一扫