ajax动态加载html模块

作者：知新_RL | 2024-04-10 13:56:54

踩

html用ajax引入heml轮播效果不好使

在开发网页的工作中，我们会经常遇到一个事情，多个页面的某一个或某几个部分是相同的，如何复用这些部分从而节省开发时间呢，在asp，jsp开发中就有引用模块的概念，现在我们来利用ajax实现模块引用，请看一段html代码


<html>
    <head></head>
    <body>    
        <div>假设这是公共的部分，很多页面都会引用这部分</div>
    </body>
</html>

　我们可以将公共部分用一个在html中没有的自定义标签包裹起来，然后当页面的文档加载完毕之后，遍历自定义标签，通过自定义标签的地址属性访问对应的模块，并将自身替换，我们可以将html结构修改为如下


<html>
    <head></head>
    <body>    
        <tpl src="your.html"></tpl>
    </body>
</html>

　然后是js代码，为了方便我直接使用了jquery库


$(function () {
    var tplList = $("tpl");
    for (var i = 0; i < tplList.length; i++) {
        var tpl = $(tplList[i]);
        var src = tpl.attr("src");
        (function (tpl) {
            $.get(src, function (data) {
                tpl.replaceWith(data);
            });
        })(tpl);
    }
});

　这里使用了闭包来保护变量，关于闭包的知识在园内有很多讲解，在此就不做赘述。　

转载于:https://www.cnblogs.com/wen-wen/p/4324465.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/399094