使用Ajax 实现网站后台架构与功能
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用Ajax 实现网站后台架构与功能 </title>
<style>
.container {
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.top {
height: 60px;
width: 100%;
float: left;
border-bottom: 1px solid #666;
background-color: lightgrey;
}
.left {
float: left;
min-height: 500px;
min-width: 160px;
margin-left: 30px;
/*background-color: lightcoral;*/
}
.left li {
margin-top: 40px;
list-style: none;
}
.left a {
text-decoration: none;
}
.right {
float: left;
min-height: 500px;
min-width: 750px;
margin-left: 30px;
/*background-color: lightgreen;*/
}
.right .content {
min-width: inherit;
min-height: inherit;
border-left: 1px solid #666;
}
</style>
</head>
<body onload="show(this)">
<div class="container">
<div class="top">
<p style="float:left">网站管理后台</p>
<p style="float:right">admin <a href="">退出</a></p>
</div>
<div class="left">
<ul>
<li><a href="user.html" onclick="show(this);return false">用户管理</a></li>
<li><a href="goods.html"onclick="show(this);return false">商品管理</a></li>
<li><a href="system.html"onclick="show(this);return false">系统设置</a></li>
</ul>
</div>
<div class="right">
<div class="content"></div>
<p style="margin-top: -50px; text-align: center;">沙雕网络科技***©版权所有 <br> (2018-2020)</p>
</div>
</div>
<script>
function show(ele) {
// 如果当前标签无法获取到href,则取默认值: welcomw.html
var url=ele.href || 'welcome.html';
var request=new XMLHttpRequest();
request.onreadystatechange=function () {
if(request.readyState===4){
if(request.status===200){
var content=document.getElementsByClassName('content').item(0);
content.innerHTML=request.responseText;
}
}
};
request.open('GET',url,true);
request.send(null);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
