使用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>
公共模块样式:
![公共模块样式](https://i-blog.csdnimg.cn/blog_migrate/2c7a8a81611685ec6c555c84474acff3.png)
页面导入公共模块: