zoukankan      html  css  js  c++  java
  • ajax动态加载html模块

    在开发网页的工作中,我们会经常遇到一个事情,多个页面的某一个或某几个部分是相同的,如何复用这些部分从而节省开发时间呢,在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);
        }
    });
    

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

     

  • 相关阅读:
    web项目中加斜杠与不加斜杠
    事务是什么,以及事务四个特性
    Java中 a+=b和a=a+b有什么区别?
    JAVA基础15
    JAVA基础13
    JAVA基础12
    JAVA基础11
    JAVA基础10
    DELPHI下的SOCK编程
    设置VSS2005使支持通过Internet访问(转)
  • 原文地址:https://www.cnblogs.com/wen-wen/p/4324465.html
Copyright © 2011-2022 走看看