作者red0whale (red whale)
看板Ajax
標題[問題] 為什麼頁面沒有回復到原先的樣子? (PJAX)
時間Thu May 28 19:03:15 2015
我正在做一個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://webptt.com/m.aspx?n=bbs/Ajax/M.1432811002.A.FCD.html
※ 編輯: red0whale (219.80.128.34), 05/28/2015 19:05:44
1F：推 lvlightvivi: 研究了一下 畫面更變是依靠popstate事件 但是2.html 05/28 23:33
2F：→ lvlightvivi: 內沒有註冊該事件，所以不會有變化 05/28 23:34
3F：→ lvlightvivi: 除非2.html也有用js註冊一樣的事件 05/28 23:35
4F：→ mrbigmouth: 不是樓上的原因 因為都在同一頁 05/29 06:28
5F：→ mrbigmouth: 我剛自己弄了一個簡易server 完全照抄你的程式碼 05/29 06:37
6F：→ mrbigmouth: 執行起來沒有問題喔 點擊link1、link2時#content的 05/29 06:38
7F：→ mrbigmouth: 內容會在abc跟kkkddddssss之間來回變化 05/29 06:38
8F：→ mrbigmouth: 瀏覽器是chrome 05/29 06:39
9F：→ mrbigmouth: 上一頁也沒問題 05/29 06:42
10F：→ mrbigmouth: 如果你是按下上一頁鈕才出現問題 請確認你瀏覽器支 05/29 06:43
11F：→ mrbigmouth: 援pushState 05/29 06:43
12F：→ mrbigmouth: 附帶一提 直接用jQuery去parse有點詭異 我不確定你 05/29 06:53
13F：→ mrbigmouth: 這種作法能適用所有狀況 通常是靠後端支援啦 05/29 06:53
14F：→ banana2014: 你確定你這樣做沒有問題嗎? 為什麼我做的跟他一樣回上 05/29 12:23
15F：→ banana2014: 頁之後就沒有回復成原來1.html的畫面呢? 請問你有執行 05/29 12:24
16F：→ banana2014: 步驟2的程序嗎? 還是說你沒有匯入jquery.js呢? 照理來 05/29 12:26
17F：→ banana2014: 說點擊Link之後只有上面那行字(abc)會改變，下面的那 05/29 12:27
18F：→ banana2014: 行字(This is pushState1.html)是不會變動的，而且步 05/29 12:30
19F：→ banana2014: 驟2一定要執行，否則根本看不出他說的問題... 05/29 12:31
20F：→ mrbigmouth: 下面那行字不會變動是正常的 他根本沒處理content2啊 05/29 12:50
21F：→ mrbigmouth: 步驟2是我漏了 那就是一樓回的 你重新輸入網址進入 05/29 12:51
22F：→ mrbigmouth: 的就是第二頁了 所有事件消失 當然失去pjax功能 05/29 12:52
23F：→ mrbigmouth: pushState1的所有script放在js檔裡讓兩頁共用即可 05/29 12:53
24F：→ mrbigmouth: 步驟二就相當於在url為第二頁時按[重新整理] 05/29 12:56
25F：→ mrbigmouth: 這樣pushState1的所有js就都消失了 05/29 12:56
謝謝你們，如果我改成這樣子是不是就正確了呢?
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
26F：→ mrbigmouth: 我照這樣寫是沒問題了 05/29 18:53
27F：→ mrbigmouth: 靠後端支援的意思就是: 你在ajax時加入特殊的query 05/29 18:55
28F：→ mrbigmouth: string或request header，server端在讀到這個特殊參數 05/29 18:55
29F：→ red0whale: 那請問一下你說的「靠後端支援」是什麼呢? 有沒有程式 05/29 18:55
30F：→ mrbigmouth: 時就只response pjax所需的html片段 不會整個document 05/29 18:55
31F：→ red0whale: 提供給我呢? 謝謝你！ 05/29 18:56
32F：→ mrbigmouth: 回傳 而不是靠前端自己parse 05/29 18:56
33F：→ red0whale: 歹謝 你講的好文言喔 可以再稍微白話一點嗎? 謝謝 05/29 18:57
35F：→ red0whale: 對不起 我已經很努力了 不過我還是看不懂 Q_Q 05/29 22:28
36F：→ red0whale: 全是英文 而且它是用asp寫的 我的SERVER語言是PHP 05/29 22:29
37F：→ red0whale: 而且google一下寫pjax相關文章的確實不多，能不能請閣 05/29 22:30
38F：→ red0whale: 下親自示範一段? 我覺得我爬文爬得好辛苦喔 根本找不到 05/29 22:31
39F：→ red0whale: 啊!! 真困難... 05/29 22:32
40F：→ KawasumiMai: 試著用你的code改寫.... 05/29 23:07
42F：→ KawasumiMai: 搭配php後端的話，這樣吧？ 05/29 23:21