利用ajax实现类似php include require 等命令的功能
需求介绍
在写页面的时候,一个导航可能N页面要用到,每一个页面都需要复制粘贴一份进去,一旦有改动html代码的需求就苦逼了,每个都得改一遍。如果这个需求还很多,反复改,那简直就是折磨人啊(虽然这种情况一般的情况下遇不到,但是偶老是遇到。)
直接看代码
//通过js创建外层div
$("#ajax-header").before(‘
$(document).ready(function(){//$("#include-head-php").load("head.html");//回调函数
$("#include-head-php").load("head.html",function(responseTxt,statusTxt,xhr){if(statusTxt=="success") {//没错,这就是传说中的去壳大法!
$("#include-head-php").children().unwrap();
}else if(statusTxt=="error") {
$("#include-head-php").html("此处组件加载失败!");
alert("Error: " + xhr.status + ": " +xhr.statusText);
}
});
})
把头部代码写到 head.html中,这样其他页面直接通过上方代码引用就可以了。我觉得也可以把上面整理成一个方法,此处直接传参调用即可,有空再搞吧。
需要注意的是,head.html中如果只写html结构代码,那么样式是可以应用到这些结构上的,但是如果是动态的,js貌似不行。必须把js一块搞进去。
如果是用前端框架,如amazeUI,实测不行,必须整个页面带
引入才行为什么不用iframe?
忘了。当时不知道考虑了啥,所以没用。以后再说
还是慢慢钻研吧,听说某些前端框架等可以直接支持这个功能那就好了。
原文:http://www.cnblogs.com/ferron/p/4598067.html