首页 > Web开发 > 详细

ajax动态加载html模块

时间:2015-03-09 22:03:02      阅读:133      评论:0      收藏:0      [点我收藏+]

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

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

 

ajax动态加载html模块

原文:http://www.cnblogs.com/wen-wen/p/4324465.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!