我正在构建一个带有左侧导航栏和右侧div内容区域的网页。
我想要做的是在点击菜单项li时将新的php文件加载到正确的div内容区域。我是ajax的新手，所以我遇到了困难。我有人可以帮助我。
链接
这是我的header.php文件，它与其他php文件一起包含在内：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<link rel='shortcut icon' type='image/x-icon' href='../favicon.ico' />
<title>Admin</title>
<link href="../css/admin.css" rel="stylesheet">
<script src="../js/jquery-2.1.3.min.js"></script>
<script src="../js/jquery.dataTables.min.js"></script>
<script> src="../js/admin-dynamic.js"</script>
<style>
html, body {
height: 100%;
}
body {
}
.page-content {
padding-top: 3.125rem;
min-height: 100%;
height: 100%;
}
.table .input-control.checkbox {
line-height: 1;
min-height: 0;
height: auto;
}
@media screen and (max-width: 800px){
#cell-sidebar {
flex-basis: 52px;
}
#cell-content {
flex-basis: calc(100% - 52px);
}
}
</style>
<script>
function pushMessage(t){
var mes = 'Info|Implement independently';
$.Notify({
caption: mes.split("|")[0],
content: mes.split("|")[1],
type: t
});
}
$(function(){
$('.sidebar').on('click', 'li', function(){
if (!$(this).hasClass('active')) {
$('.sidebar li').removeClass('active');
$(this).addClass('active');
}
})
})
</script>
</head>
这是左侧导航栏php：
<div class="page-content">
<div class="flex-grid no-responsive-future" style="height: 100%;">
<div class="row" style="height: 100%">
<div class="cell size-x200" id="cell-sidebar" style="background-color: #71b1d1; height: 100%">
<ul class="sidebar">
<li><a href="#">
<span class="mif-apps icon"></span>
<span class="title">Home</span>
<span class="counter">0</span>
</a></li>
<li><a href="#">
<span class="mif-vpn-publ icon"></span>
<span class="title">US Migration</span>
<span class="counter">0</span>
</a></li>
<li class="active"><a href="test.php">
<span class="mif-drive-eta icon"></span>
<span class="title">Virtual machines</span>
<span class="counter">2</span>
</a></li>
<li><a href="#">
<span class="mif-cloud icon"></span>
<span class="title">Cloud services</span>
<span class="counter">0</span>
</a></li>
<li><a href="#">
<span class="mif-database icon"></span>
<span class="title">SQL Databases</span>
<span class="counter">0</span>
</a></li>
<li><a href="#">
<span class="mif-cogs icon"></span>
<span class="title">Automation</span>
<span class="counter">0</span>
</a></li>
<li><a href="#">
<span class="mif-apps icon"></span>
<span class="title">all items</span>
<span class="counter">0</span>
</a></li>
</ul>
</div>
这是我开始的页面，需要刷新：
<div class="cell auto-size padding20 bg-white" id="cell-content">
<h1 class="text-light"> Project<span class="mif-drive-eta place-right"></span></h1>
<hr class="thin bg-grayLighter">
<button class="button primary" onclick="pushMessage('info')"><span class="mif-plus"></span> Create...</button>
<button class="button success" onclick="pushMessage('success')"><span class="mif-play"></span> Start</button>
<button class="button warning" onclick="pushMessage('warning')"><span class="mif-loop2"></span> Restart</button>
<button class="button alert" onclick="pushMessage('alert')">Stop all </button>
<hr class="thin bg-grayLighter">
<table class="dataTable border bordered" data-role="datatable" data-auto-width="false">
<thead>
<tr>
<td style="width: 20px">
</td>
<td class="sortable-column sort-asc" style="width: 100px">ID</td>
<td class="sortable-column">name</td>
<td class="sortable-column">Address</td>
<td class="sortable-column" style="width: 20px">Status</td>
<td style="width: 20px">Switch</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="input-control checkbox small-check no-margin">
<input type="checkbox">
<span class="check"></span>
</label>
</td>
<td>123890723212</td>
<td>No.</td>
<td><a href="#">link</a></td>
<td class="align-center"><span class="mif-checkmark fg-green"></span></td>
<td>
<label class="switch-original">
<input type="checkbox" checked>
<span class="check"></span>
</label>
</td>
</tr>
<tr>
<td>
<label class="input-control checkbox small-check no-margin">
<input type="checkbox">
<span class="check"></span>
</label>
</td>
<td>123890723212</td>
<td>No.2</td>
<td><a href="#">link</a></td>
<td class="align-center"><span class="mif-stop fg-red"></span></td>
<td>
<label class="switch-original">
<input type="checkbox">
<span class="check"></span>
</label>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
这是test.php文件，我希望将内容放入上一页：
<div class="cell auto-size padding20 bg-white" id="cell-content">
<h1 class="text-light">TEST REFRESH CONTENT PAGE<span class="mif-drive-eta place-right"></span></h1>
<hr class="thin bg-grayLighter">
<button class="button primary" onclick="pushMessage('info')"><span class="mif-plus"></span> Create...</button>
<button class="button success" onclick="pushMessage('success')"><span class="mif-play"></span> Start</button>
<button class="button warning" onclick="pushMessage('warning')"><span class="mif-loop2"></span> Restart</button>
<button class="button alert" onclick="pushMessage('alert')">Stop all machines</button>
<hr class="thin bg-grayLighter">
<table class="dataTable border bordered" data-role="datatable" data-auto-width="false">
<thead>
<tr>
<td style="width: 20px">
</td>
<td class="sortable-column sort-asc" style="width: 100px">ID</td>
<td class="sortable-column">TEST</td>
<td class="sortable-column">TEST</td>
<td class="sortable-column" style="width: 20px">Status</td>
<td style="width: 20px">Switch</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="input-control checkbox small-check no-margin">
<input type="checkbox">
<span class="check"></span>
</label>
</td>
<td>TEST</td>
<td>TEST</td>
<td><a href="http://virtuals.com/machines/123890723212">link</a></td>
<td class="align-center"><span class="mif-checkmark fg-green"></span></td>
<td>
<label class="switch-original">
<input type="checkbox" checked>
<span class="check"></span>
</label>
</td>
</tr>
<tr>
<td>
<label class="input-control checkbox small-check no-margin">
<input type="checkbox">
<span class="check"></span>
</label>
</td>
<td>TEST</td>
<td>TEST</td>
<td><a href="http://virtuals.com/machines/123890723212">link</a></td>
<td class="align-center"><span class="mif-stop fg-red"></span></td>
<td>
<label class="switch-original">
<input type="checkbox">
<span class="check"></span>
</label>
</td>
</tr>
</tbody>
</table>
</div>
我正在尝试使用ajax来实现这一点，这里是我的ajax代码，它存储在header.php中调用的admin-dynamic.js文件中：
$.ajaxSetup ({
// disable caching of ajax responses */
cache: false
});
// Admin body refresh
$(document).ready(function(){
//for every a tag in the ul sidebar, on click execute the function
$("ul.sidebar li a").click(function(){
//run an ajax get request and the page is the href in the a tag clicked. this refers to the a tag clicked. attr("href") gets the value in the href tag.
$.get($(this).attr("href"), function(data){
//on successful request the element with id 'cell-content' will have its innerHTML set to the contents of the page requested
$("#cell-content").html(data);
});
//this stops the browser going to href page
return false;
});
});
这对我不起作用。它正在做的是将浏览器重定向到test.php页面，而不是将test.php的内容加载到cell-content div中。
提前感谢任何可以帮助我做我需要做的事情的人。我可能完全采取了错误的做法，我不确定......
答案 0 :(得分：0)
你走了。试试这个。我添加了评论，希望能够添加您的理解。
<div id="cell-content">
<h1>This is where the content will appear when you click a link</h1>
</div>
<!--link jquery to page otherwise jquery commands will not work-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
//happens once the document is loaded
$(document).ready(function(){
//for ever a tag in the ul sidebar on click execute the function
$("ul.sidebar li a").click(function(){
//run an ajax get request and the page is the href in the a tag clicked. this refers to the a tag clicked. attr("href") gets the value in the href tag.
var link = $(this).attr("href");
if (link != "#") {
$.get(link, function(data){
//on successful request the element with id 'cell-content' will have its innerHTML set to the contents of the page requested
$("#cell-content").html(data);
});
}
//this stops the browser going to href page
return false;
});
});
</script>