不同html页面相同部分代码的提取

最新推荐文章于 2022-11-29 11:31:26 发布

dutong0321

最新推荐文章于 2022-11-29 11:31:26 发布

阅读量7.8k

点赞数 2

分类专栏：编程世界文章标签： html ajax 相同部分导航菜单

本文链接：https://blog.csdn.net/dutong0321/article/details/78610511

版权

编程世界专栏收录该内容

27 篇文章 1 订阅

订阅专栏

问题重现

在编写html页面时，遇到一个问题，在某个站点中绝大部分页面都拥有着相同的导航栏，并且这个导航栏中的菜单和连接，将会不断的改变。虽然说，可以在每次改变以后进行逐个页面的更改，但是也显得十分麻烦，而且容易落下某个页面，造成不便。

解决方法

其实采用的是Ajax的方法来解决这个问题的。
在html中，将相同的部分提取出来放到另外一个文件当中，如menu.dat：

<ul>
    <li>
        <a href="001.html">001</a>
    </li>
    <li>
        <a href="002.html">002</a>
    </li>
</ul>

然后，修改html文件，将该部分以div来代替，最后使用Ajax获取menu.dat的内容进行替代。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <header>
        <div id="main_menu"></div>
    </header>

    <script type="text/javascript">
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("main_menu").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "menu.dat", true);
        xmlhttp.send();
    </script>
</body>
</html>

其实，不仅仅html可以，jsp也是可以采用相同的方法。而且，在menu.dat中也可以把css标签也可以放进去，最后在html中获取到后也是会处理的。这种方法也不是没有缺点的，例如在这里不可以使用像jsp这种在服务器解析的标签，还比如说struts标签等，如果有需要这些标签的同学建议把html文件中相同的部分另外做个页面，最后直接往里引整个html页面。

dutong0321

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
不同html页面相同部分代码的提取

问题重现在编写html页面时，遇到一个问题，在某个站点中绝大部分页面都拥有着相同的导航栏，并且这个导航栏中的菜单和连接，将会不断的改变。虽然说，可以在每次改变以后进行逐个页面的更改，但是也显得十分麻烦，而且容易落下某个页面，造成不便。
复制链接

扫一扫