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