利用ajax实现类似php include require 等命令的功能
需求介绍 在写页面的时候，一个导航可能N页面要用到，每一个页面都需要复制粘贴一份进去，一旦有改动html代码的需求就苦逼了，每个都得改一遍。如果这个需求还很多，反复改，那简直就是折磨人啊（虽然这种情况一般的情况下遇不到，但是偶老是遇到。）
直接看代码
<script id="ajax-header" type="text/javascript">
//通过js创建外层div
$("#ajax-header").before(‘<div id="include-head-php"></div>‘);
$(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);
}
});
})
</script>
把头部代码写到 head.html中，这样其他页面直接通过上方代码引用就可以了。我觉得也可以把上面整理成一个方法，此处直接传参调用即可，有空再搞吧。
需要注意的是，head.html中如果只写html结构代码，那么样式是可以应用到这些结构上的，但是如果是动态的，js貌似不行。必须把js一块搞进去。
如果是用前端框架，如amazeUI，实测不行，必须整个页面带<html><head>引入才行
为什么不用iframe？
忘了。当时不知道考虑了啥，所以没用。以后再说
还是慢慢钻研吧，听说某些前端框架等可以直接支持这个功能那就好了。
时间： 2024-11-10 00:15:40