Ajax页面刷新页面按钮没有返回点击
问题描述:
我做了一个ajax函数调用一个/ pages文件夹中的php页面,我打电话给我的页面在ajax-container
div,但是当我点击refresh the page
按钮时,history pushstate正在工作,因为我在地址栏中看到了页面,但它仅加载了index.php的内容,但在我的ajax-container
中没有任何反应。 那么我怎么能得到我刷新页面时调用的页面?Ajax页面刷新页面按钮没有返回点击
htacces:
Options +FollowSymLinks
RewriteEngine On
RewriteBase/
RewriteRule ^([a-zA-Z0-9\-]*).php$ index.php?p=$1 [L]
Ajax的容器:
<div id="ajax-container">
<?php
$d = "pages/";
if (isset($_GET['p'])) {
$p = strtolower($_GET['p']);
if (preg_match("/^[a-z0-9\-]+$/", $p) && file_exists($d . $p . ".php")) {
include $d . $p . ".php";
} else {
include $d . "404.html";
}
} else {
include $d . "home.php";
}
?>
</div>
和我的AJAX功能:
var afficher = function(data, page) {
$('#ajax-container').delay(200).fadeOut(250, function() {
$('#ajax-container').empty();
$('#ajax-container').append(data);
$('#ajax-container').fadeIn(100, function() {});
});
};
var lastRequest = null;
if (lastRequest !== null) {
lastRequest.abort();
}
var loadPage = function(page, storeHistory) {
if (typeof storeHistory === 'undefined') {
storeHistory = true;
}
lastRequest = $.ajax({
url: "pages/" + page,
cache: false,
success: function(html) {
afficher(html, page);
if (storeHistory === true) {
history.pushState({
'key': 'value',
'url': page
}, '', page);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
afficher('erreur lors du chagement de la page');
}
});
return false;
};
window.addEventListener('load', function() {
setTimeout(function() {
window.addEventListener('popstate', function(e) {
if (e.state === null) {
loadPage('home.php');
} else {
loadPage(e['state']['url'], false);
}
});
}, 0);
});
答
我明白了,那么我不明白jQuery的,因为我只用纯JavaScript AJAX工作。但是,我知道一些事情要检查。
1-您的PHP是否回应了事情?即使你通过AJAX获得一个php文件,它也不会显示任何东西,除非信息被回显出来。
2 - 我没有看到innerHTML,与我的经验(再次只使用纯JavaScript AJAX)一样,回显的php代码将放在div的innerHTML中。例如你的div: 阿贾克斯前:
<div id="ajax-container">
hello
</div>
AJAX得到php文件:
AJAX完成,内容是准备好...(XMLHTTP =的XMLHttpRequest())
document.getElementById("ajax-container").innerHTML=xmlhttp.responseText;//responseText= whatever php echoed out
在AJAX之后:
<div id="ajax-container">
hi
</div>
这取代了div的内容T,下面将添加到它:
document.getElementById("ajax-container").innerHTML.=xmlhttp.responseText;
note the period for concat^
3-如果你仍然有问题,打开你的浏览器开发者工具 - >网络标签 - > php文件名
这将让你看到什么该PHP文件是说(var_dumps,回声,错误,如果错误报告的东西允许它)
嗯,我只是很熟悉纯粹的JavaScript AJAX的顶部,你想要做什么困惑。然而,“loadPage”看起来像你想要去一个新的页面? ... AJAX不打算进入一个新的页面,它带来的内容,而无需重新加载页面。 – Tyler
是的,我想做什么它在我的index.php我带'about.php'在我的ajax容器,所以现在在我的'about.php'我有另一个链接,我想当我点击这个链接, AJAX用这个新页面替换'about.php' – Tiaw