一旦网址由window.pushState更新,我的网站就不会在刷新页面时加载。我的网站保存在以下位置:http://localhost/ajax.test/index.html 但在点击href =“1”的链接后,网址将更改为http://localhost/ajax.test/1 ..这是源代码:
HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body>
<ul>
<li class="list" id="1"><a href="1">home</a></li>
<li class="list" id="2"><a href="2">project</a></li>
<li class="list" id="3"><a href="3">about</a></li>
</ul>
<div id="dynamic"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body>
<ul>
<li class="list" id="1"><a href="1">home</a></li>
<li class="list" id="2"><a href="2">project</a></li>
<li class="list" id="3"><a href="3">about</a></li>
</ul>
<div id="dynamic"></div>
</body>
</html>
jQuery的:
PHP:
var url = 0;
var state=0;
$(document).ready(function(){
$('ul a').click(function(e) {
e.preventDefault();
alert(e.target);
url = $(this).attr("href");
history.pushState({page:url}, url,url);
loadContent(url);
});
});
$(window).bind('popstate', function(e){
state = event.state;
if(state){
loadContent(state.page);
}else{
loadContent("home");
}
});
function loadContent(currentPage){
alert(currentPage);
$.ajax({
type: "GET",
url: "ajax.php",
data: "id="+currentPage,
success: function(data){
$('#dynamic').html(data);
}
});
};