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

最新推荐文章于 2025-05-27 15:45:34 发布

lsx19981201

最新推荐文章于 2025-05-27 15:45:34 发布

阅读量1.5k

点赞数 1

本文介绍了一种利用Ajax技术减少项目中重复代码的方法，通过将共同元素存储在单独文件中并动态加载，有效提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文：https://blog.youkuaiyun.com/dutong0321/article/details/78610511

在做项目的时候，对于注册页面弹窗这个问题上会发现大段重复代码出现在因用户角色不同而设置不同的页面中。想办法把重复出现的代码提取出来另外放在一个页面。百度了一下，发现一个博主写的很好，清楚，用了也完美的解决了问题。

解决方法

其实采用的是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页面。