作者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/cn.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