jq load()方法实现html 模块化。

在我们写项目的时候，会遇到一个模块在多个页面使用，如果没有页面都写一次，那就太费劲了。

如果你使用了框架（vue，react，Angular）的话，那框架都有模块化，可以轻松解决。

如果你使用原生开发的话，怎么办呢？

传统的纯 js 做法可以使用

var content = document.getElementById("content");

content.innerHTML("一大坨HTML代码")

就是重新绘制那部分DIV，当然往往我们的需要写很多标签，很不爽。

 

服务端渲染

在做Java项目时，我们可以采用多种方法对页面进行模块化。

例如，使用JSP时，我们可以这样引入一个片段：

<%@ include file="page.jsp" %>

但是需要后台支持。

 

jQuery的load()方法

load方法使用很简单

$("#id").load("param") 这个 param 可以直接指定某个 url ，必须在是本服务器可以请求的页面哦

注意：load方法不能在本地去加载一个页面，必须在是同一个服务器上。

文件目录（本地起了一个node服务测试的）

 

 

 

footer页面

 

 

 比如：现在我们有个footer，需要在多个页面使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
    <h1>测试</h1>
    <!-- 公共尾部 -->
    <footer id="footer"></footer>
</body>
<script>
    $(function(){
        $('#footer').load('footer.html');
    })
</script>
</html>

 

效果图：这时我们已经吧footer插入到 test.html了

posted @ 2019-12-19 10:59  男孩亮亮  阅读(2733)  评论(0)  编辑  收藏  举报