Pjax实现网页局部刷新

最新推荐文章于 2023-03-29 16:50:04 发布

VIP文章失忆意

最新推荐文章于 2023-03-29 16:50:04 发布

阅读量5.1k

点赞数

分类专栏： Pjax 文章标签： Pjax 局部刷新

本文链接：https://blog.csdn.net/Toxic07/article/details/46831853

版权

现在很多网站( 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">

最低0.47元/天解锁文章

失忆意

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Pjax实现网页局部刷新

现在很多网站( facebook, twitter)都支持这样的一种浏览方式，当你点击一个站内的链接的时候，不是做页面跳转，而是只是站内页面刷新。这样的用户体验，比起整个页面都闪一下来说，好很多。其中有一个很重要的组成部分，这些网站的ajax刷新是支持浏览器历史的，刷新页面的同时，浏览器地址栏位上面的地址也是会更改，用浏览器的回退功能也能够回退到上一个页面。那么如果我们想要
复制链接

扫一扫