Ajax也可以本地取模板 ，示例--完善窗口隐藏与共用,简单示例模板代码放在templet文件夹中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>本地取模板--完善窗口隐藏与共用</title>
<style>
.add{
width: 300px;
background-color: gray;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>打开<input type="button"id="open"></li>
<li>浏览<input type="button" id="look"></li>
</ul>
</body>
<script>
var getHTML=function(url,fn){
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.setRequestHeader("content-type", "text/plain");
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
fn(xhr.responseText);
}
}
xhr.send(null);
}
//打开窗口一
var open = document.getElementById("open");
open.onclick=function(){
getHTML("templet/add.html",function(html){
var dialog=document.createElement("div");
dialog.innerHTML=html;
document.body.appendChild(dialog);
var words=document.getElementById("words");
words.setAttribute("status","open"); //设置属性
words.innerText="haaaaaaaa";
Bind_Event(); //打开窗口里各种操作函数的执行
});
}
//打开窗口二
var look=document.getElementById("look");
look.onclick=function() {
getHTML("templet/add.html",function(html){
var dialog=document.createElement("div");
dialog.innerHTML=html;
document.body.appendChild(dialog);
var words=document.getElementById("words");
words.setAttribute("status","look");
words.innerText="xiiiiiiii";
Bind_Event();
});
}
//退出
var Bind_Event=function(){
var exit=document.getElementById("exit");
exit.addEventListener("click",function() {
document.getElementById("add").remove();
} )
}
</script>
</html>
templet文件夹
<div class="add" id="add">
<p class="words" id="words"></p>
<input type="button" value="退出" id="exit">
</div>
时间： 2024-08-01 10:44:41