使用jquery导入页面的公共部分，亲测有效

最新推荐文章于 2025-04-19 14:03:57 发布

TCRookie

最新推荐文章于 2025-04-19 14:03:57 发布

阅读量782

点赞数

分类专栏：前后端分离 jquery html 文章标签： jquery html css 前端

本文链接：https://blog.youkuaiyun.com/weixin_44773752/article/details/115409018

版权

前后端分离同时被 3 个专栏收录

5 篇文章

订阅专栏

jquery

1 篇文章

订阅专栏

html

1 篇文章

订阅专栏

使用ajax获取访问路径中的页面内容，在插入到要渲染的页面上。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
<!-- 引入jquery的包-->
		<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
	</head>
	<body>
		
		<!--无关紧要代码-->
		<div style="margin: 0 auto; margin-top: 50px; text-align: center; ;"><h1>要导入的公共部分模块，该页面为测试页面</h1></div>

	<!--以下为重要代码块-->
		<div id="import" style="border: solid;"></div>
		<script>
			 $.ajax({
			 //url路径为公共页面在浏览器预览时的地址
			    url : 'http://127.0.0.1:8848/Blog-2/navigation.html',
				cache : true,
				async : false,
				success : function(html) {
					$("#import").html(html);
				}
			}); 
		</script>
	</body>
</html>