Pjax实现网页局部刷新

原创 2015年07月10日 15:53:10

现在很多网站( facebook, twitter)都支持这样的一种浏览方式, 当你点击一个站内的链接的时候, 不是做页面跳转, 而是只是站内页面刷新。 这样的用户体验, 比起整个页面都闪一下来说, 好很多。 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏览器历史的, 刷新页面的同时, 浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退到上一个页面。 那么如果我们想要实现这样的功能, 我们如何做呢? pjax提供了一个脚本支持这样的功能。 pjax项目地址在 https://github.com/defunkt/jquery-pjax 。 实际的效果见: http://pjax.heroku.com/ 没有勾选pjax的时候, 点击链接是跳转的。 勾选了之后, 链接都是变成了ajax刷新。
下面是一个简单的Pjax例子,其中内容大致相同,除了跳转部分
第一页:

<?php
$a=apache_request_headers();
  if(empty($a["X-PJAX"])){

  }else{
 echo "<h1>啦啦啦啦啦啦啦我是1 iam from php</h1>Go to <a id='aaa' href='index2.php'>去2</a>";
 exit();
  }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='zh-CN' xml:lang='zh-CN' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>

<h1>啦啦啦啦啦啦啦</h1>
  <div class="container" id="pjax-container">
  <h1>啦啦啦啦啦啦啦我是1</h1>
    Go to <a id="aaa" href="index2.php">去2</a>
  </div>
<h1>啦啦啦啦啦啦啦</h1>

<div id="loading" style="display:none;position:fixed;top: 0;left: 0;bottom: 0;right: 0;padding-top: 190px;background: rgba(255,255,255,0.8);z-index: 9999;text-align: center;color: #767676;">
<p><img alt="" height="64" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-128.gif" width="64"></p>
<p>Loading…</p>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="pjax.js"></script>
<script>
$(document).pjax('#aaa', '#pjax-container');
$(document).on("pjax:send", "#pjax-container", function() {
$('#loading').show();
    });
$(document).on("pjax:complete", "#pjax-container", function(t) {
$('#loading').hide();
    });
$(document).on("pjax:timeout", "#pjax-container", function() {
        return !1
});
$(function(){
var mydate = new Date();
var t=mydate.toLocaleString();
$("h1").append("<i>"+t+"</i>");
});
</script>
</body>
</html>

第二页:

<?php
$a=apache_request_headers();
  if(empty($a["X-PJAX"])){

  }else{
 echo "<h1>啦啦啦啦啦啦啦我是2 iam from php</h1>Go to <a id='aaa' href='index1.php'>去1</a>";
 exit();
  }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='zh-CN' xml:lang='zh-CN' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h1>啦啦啦啦啦啦啦</h1>
  <div class="container" id="pjax-container">
  <h1>啦啦啦啦啦啦啦我是2</h1>
    Go to <a id="aaa" href="index1.php">去1</a>
  </div>
<h1>啦啦啦啦啦啦啦</h1>
<div id="loading" style="display:none;position:fixed;top: 0;left: 0;bottom: 0;right: 0;padding-top: 190px;background: rgba(255,255,255,0.8);z-index: 9999;text-align: center;color: #767676;">
<p><img alt="" height="64" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-128.gif" width="64"></p>
<p>Loading…</p>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="pjax.js"></script>
<script>
$(document).pjax('#aaa', '#pjax-container');
$(document).on("pjax:send", "#pjax-container", function() {
$('#loading').show();
    });
$(document).on("pjax:complete", "#pjax-container", function(t) {
$('#loading').hide();
    });
$(document).on("pjax:timeout", "#pjax-container", function() {
        return !1
});
$(function(){
var mydate = new Date();
var t=mydate.toLocaleString();
$("h1").append("<i>"+t+"</i>");
});
</script>
</body>
</html>

效果如下:
效果图

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Toxic07/article/details/46831853

jQuery pjax 应用简单示例

https://github.com/defunkt/jquery-pjax!   ajax缺点是破坏了浏览器的前进后退,因为ajax的请求不会留在历史记录中。pjax就不一样了,pjax被解释成aj...
  • xmlife
  • xmlife
  • 2016-08-26 20:26:52
  • 16479

【Jquery】Pjax的了解与应用

什么是pjax?现在很多网站( facebook, twitter)都支持这样的一种浏览方式, 当你点击一个站内的链接的时候, 不是做页面跳转, 而是只是站内页面刷新。 这样的用户体验, 比起整个页...
  • qq_28602957
  • qq_28602957
  • 2017-05-31 19:13:43
  • 1595

jQuery Pjax于ajax的区别

最近小松发现了Pjax的技术,本来想把这个用到自己的博客上,相信还是算了吧,之后找个时间在搞 ajax ajax技术应该大家都知道就是用来后台与服务器进行少量数据交换,也就不用刷新页面就能看到数据内容...
  • a454213722
  • a454213722
  • 2016-08-17 12:00:04
  • 4722

thinkphp+Pjax Demo 实现无刷新改变URL的方式

TP3.1.3+Pjax Demo 实现无刷新改变URL的方式 Pjax相关原理及用法可以从下面的网站查看。 welefen版本:https://github.com/welefen/pjax ...
  • e421083458
  • e421083458
  • 2013-12-11 11:22:22
  • 7268

Bootstrap-Iconpicker 和pjax插件一起使用图标加载问题

个人博客地址https://xgs888.top/post/view?id=72 项目中整站用到pjax,由于需要菜单栏显示小图标就用了Bootstrap-Iconpicker插件,只需要直...
  • xgs736214763
  • xgs736214763
  • 2017-12-08 16:58:22
  • 141

关于pjax的一些坑

静态页面中应用pjax看不到效果由于我是在laravel中应用的pjax,所以在layouts中的app.blade.php中引用了pjax和nprogress的相关js和css。建立公共代码pjax...
  • sinat_21125451
  • sinat_21125451
  • 2017-01-24 10:33:58
  • 3207

pjax中一些js插件不生效的解决办法

个人博客原文地址https://xgs888.top/post/view?id=71 在项目中用到pjax,有一些其他js插件是在子页面中,pjax只是局部的加载,导致js生效项目框架用的lara...
  • xgs736214763
  • xgs736214763
  • 2017-12-06 09:53:37
  • 728

pjax导致Prism代码高亮失效解决办法

prism.js是我非常喜欢的一款代码高亮的插件,使用简单,并且样式多样,支持的语言也多。 我之前的wordpress的站点也是使用的prism来进行代码高亮,只不过之前使用的是黑色主题,现在觉得有...
  • qq_20441521
  • qq_20441521
  • 2016-12-13 22:11:48
  • 861

PJAX实现页面无刷新跳转及加载数据(浏览器可回退前进)

什么是PJAX? https://github.com/defunkt/jquery-pjax https://my.oschina.net/sub/blog/123447 https://ww...
  • u013890024
  • u013890024
  • 2016-10-31 18:40:55
  • 3644

pjax实现页面局部刷新跳转

简介 pjax是一个jQuery插件,使用ajax和pushState技术提供快速的浏览体验与真正的永久链接、网页标题、以及浏览器的后退前进按钮操作。 pjax通过抓取HTML从您的服务器通过Aj...
  • zh_rey
  • zh_rey
  • 2017-10-18 17:23:19
  • 892
收藏助手
不良信息举报
您举报文章:Pjax实现网页局部刷新
举报原因:
原因补充:

(最多只允许输入30个字)