[問題] 為什麼頁面沒有回復到原先的樣子? (PJAX)
我正在做一個PJAX(pushState+AJAX)無刷新改變URL的頁面，以下是個簡單的測試：
pushState1.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
<!--
$(document).ready(function(e) {
$("a").click(function(e){
e.preventDefault();
var url = $(this).attr("href");
history.pushState({page:url}, url, url);
showPage(url);
});
});
$(window).bind("popstate", function(e){
var state = event.state;
if(state){
showPage(state.page);
}else{
showPage("pushState1.html");
}
});
function showPage(hrefPage){
$.get(hrefPage,function(result){
$("#content").html($(result).filter('#content').text());
});
}
-->
</script>
</head>
<body>
<a href="pushState1.html">Link 1</a> <a href="pushState2.html">Link 2</a>
<div id="content" class="content">abc</div>
<div id="content2" class="content2">This is pushState1.html</div>
</body>
</html>
pushState2.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<a href="pushState1.html">Link 1</a> <a href="pushState2.html">Link 2</a>
<div id="content" class="content">kkkddddssss</div>
<div id="content2" class="content2">This is pushState2.html</div>
</body>
</html>
以上看似沒有問題並可以正確地執行，但跟著以下步驟你將會發現有個問題所在：
1. 進入“pushState1.html”，然後點擊“Link 2”，你將會看到網址列顯示
“pushState2.html”，然後第一行字(abc)會變成“kkkddddssss”。
2. 接著，單點網址列，不必輸入什麼，直接按下Enter鍵重新進入該頁
面(pushState2.html)，你將會看到pushState2.html的原貌。到這裡為止並沒
有發現什麼問題。
3.回上一頁(pushState1.html)，接著問題就來了：為什麼它沒有恢復成原來
pushState1.html的原貌而卻繼承了pushState2.html的頁面畫面。
理論上在按下上一頁鈕之後pushState1.html應該要回復成它原來的樣子，縱使它有PJAX和
popstate存在。請問是哪裡出錯了? 並要怎麼修正它呢?
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 219.80.128.34
※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1432811002.A.FCD.html
※ 編輯: red0whale (219.80.128.34), 05/28/2015 19:05:44
推
05/28 23:33, , 1F
05/28 23:33, 1F
→
05/28 23:34, , 2F
05/28 23:34, 2F
→
05/28 23:35, , 3F
05/28 23:35, 3F
→
05/29 06:28, , 4F
05/29 06:28, 4F
→
05/29 06:37, , 5F
05/29 06:37, 5F
→
05/29 06:38, , 6F
05/29 06:38, 6F
→
05/29 06:38, , 7F
05/29 06:38, 7F
→
05/29 06:39, , 8F
05/29 06:39, 8F
→
05/29 06:42, , 9F
05/29 06:42, 9F
→
05/29 06:43, , 10F
05/29 06:43, 10F
→
05/29 06:43, , 11F
05/29 06:43, 11F
→
05/29 06:53, , 12F
05/29 06:53, 12F
→
05/29 06:53, , 13F
05/29 06:53, 13F
→
05/29 12:23, , 14F
05/29 12:23, 14F
→
05/29 12:24, , 15F
05/29 12:24, 15F
→
05/29 12:26, , 16F
05/29 12:26, 16F
→
05/29 12:27, , 17F
05/29 12:27, 17F
→
05/29 12:30, , 18F
05/29 12:30, 18F
→
05/29 12:31, , 19F
05/29 12:31, 19F
→
05/29 12:50, , 20F
05/29 12:50, 20F
→
05/29 12:51, , 21F
05/29 12:51, 21F
→
05/29 12:52, , 22F
05/29 12:52, 22F
→
05/29 12:53, , 23F
05/29 12:53, 23F
→
05/29 12:56, , 24F
05/29 12:56, 24F
→
05/29 12:56, , 25F
05/29 12:56, 25F
謝謝你們，如果我改成這樣子是不是就正確了呢?
pushState1.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="pjax.js"></script>
</head>
<body>
<a href="pushState1.html">Link 1</a> <a href="pushState2.html">Link 2</a>
<div id="content" class="content">abc</div>
<div id="content2" class="content2">This is pushState1.html</div>
</body>
</html>
pushState2.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="pjax.js"></script>
</head>
<body>
<a href="pushState1.html">Link 1</a> <a href="pushState2.html">Link 2</a>
<div id="content" class="content">kkkddddssss</div>
<div id="content2" class="content2">This is pushState2.html</div>
</body>
</html>
pjax.js:
$(document).ready(function(e) {
$("a").click(function(e){
e.preventDefault();
var url = $(this).attr("href");
history.pushState({page:url}, url, url);
showPage(url);
});
});
$(window).bind("popstate", function(e){
var state = event.state;
if(state){
showPage(state.page);
}else{
showPage(location.href);
}
});
function showPage(hrefPage){
$.get(hrefPage,function(result){
$("#content").html($(result).filter('#content').text());
});
}
另外，大嘴巴先生說的「靠後端支援」是什麼意思? PJAX通常都是靠SEVER端支援的嗎?
如果是這樣，請問程式該怎麼寫呢? 有沒有範例可以提供給我呢? 謝謝各位！
※ 編輯: red0whale (219.80.132.200), 05/29/2015 17:57:07
→
05/29 18:53, , 26F
05/29 18:53, 26F
→
05/29 18:55, , 27F
05/29 18:55, 27F
→
05/29 18:55, , 28F
05/29 18:55, 28F
→
05/29 18:55, , 29F
05/29 18:55, 29F
→
05/29 18:55, , 30F
05/29 18:55, 30F
→
05/29 18:56, , 31F
05/29 18:56, 31F
→
05/29 18:56, , 32F
05/29 18:56, 32F
→
05/29 18:57, , 33F
05/29 18:57, 33F
→
05/29 18:58, , 34F
05/29 18:58, 34F
→
05/29 22:28, , 35F
05/29 22:28, 35F
→
05/29 22:29, , 36F
05/29 22:29, 36F
→
05/29 22:30, , 37F
05/29 22:30, 37F
→
05/29 22:31, , 38F
05/29 22:31, 38F
→
05/29 22:32, , 39F
05/29 22:32, 39F
→
05/29 23:07, , 40F
05/29 23:07, 40F
→
05/29 23:07, , 41F
05/29 23:07, 41F
→
05/29 23:21, , 42F
05/29 23:21, 42F
→
05/29 23:21, , 43F
05/29 23:21, 43F
Ajax 近期熱門文章
PTT數位生活區 即時熱門文章
