首页 > 代码库 > Ajax本地取模板--完善窗口隐藏与共用
Ajax本地取模板--完善窗口隐藏与共用
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>
Ajax本地取模板--完善窗口隐藏与共用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。