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); } });
这里使用了闭包来保护变量,关于闭包的知识在园内有很多讲解,在此就不做赘述。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。