狼山资源网

jQuery+pjax简单示例汇总
网络编程 2024/11/14 佚名
3 2

pjax 是一个jQuery插件，它使用 ajax 和 pushState 来实现快速的浏览体验，包括真正的固定链接，页面标题和工作返回按钮。

ajax缺点是破坏了浏览器的前进后退，因为ajax的请求不会留在历史记录中。pjax就不一样了，pjax被解释成ajax+pushState的封装，因为它把ajax的请求写入历史记录，并反映在地址栏，这样用户就能愉快地使用前进后退了。pjax有好几个实现方法，这里使用最常用的jQuery库，使用jquery.pjax.js。演示代码的服务器端使用PHP脚本语言。

Pjax用在那儿？就说百度云盘吧，这个大家肯定都用过。百度云盘PC端，在点击打开某个文件夹后会打开这个文件夹下的文件，其实显示文件的这个div就用到了pjax技术。地址栏变换，内容更换，但是却是一个ajax请求。等到后退的时候，不必重新请求上一层文件夹的内容，因为是存在在历史记录中的。而且，开发者还可以选择时候使用cache和storage缓存。

示例一、

<!DOCTYPE html>
<html>
<head>
 <title>pjax</title>
  <meta charset="utf-8">
</head>
<body>
 <h1>My Site</h1>
 <div>
  Go to <a href="res1.php" rel="external nofollow" >第一页</a>.<a href="res2.php" rel="external nofollow" >第二页</a>
 </div>
 <div id="container"></div>  
</body>
<script src="/UploadFiles/2021-04-02/jquery-2.1.4.min.js">


res1.php





<"<div style='background:red;'>第一页</div>";






res2.php





<"<div style='background:red;'>第二页</div>";






解释：


$(document).pjax('a', '#Container') 其中 a 是触发元素， #container 是装载 pjax 返回内容的容器，下面也是这样。


示例二、





<!DOCTYPE html>
<html>
<head>
 <title>pjax</title>
  <meta charset="utf-8">
</head>
<body>
 <h1>My Site</h1>
 <div>
  <input type="button" id="clickMe" value="GO">
 </div>
 <div id="container"></div>  
</body>
<script src="/UploadFiles/2021-04-02/jquery-2.1.4.min.js">


服务器端代码：


res3.php:





<"<div style='background:red;'>第三页</div>";






三综合应用


window.history.pushState(state, title, url);

// https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState

// @状态对象:  记录历史记录点的额外对象,可以为空.

// @页面标题:  目前所有浏览器都不支持.

// @可选的URL: 浏览器不会检查URL是否存在,只改变URL.URL必须同域,不能跨域.




PJAX其实就是HTML5 window.history.pushState(state, title, url)这个新的API加上传统的AJAX技术,一般用来实现无刷新的页面加载.pushState的作用主要是:改变URL和添加返回历史.这样AJAX无刷新加载页面后,用户还可以正常进行后退和前进,JS的window.history.back()和window.history.forward()也能正常工作.下面就是一个用pushState + jQuery AJAX实现的无刷新的页面加载,不支持的浏览器则自动退化成打开原始的链接打开形式.


index.php:





<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<script src="/UploadFiles/2021-04-02/jquery.js">


data.php:





<"utf-8">
<title>Data</title>
<script src="/UploadFiles/2021-04-02/jquery.js">



<div class="body"> 
  <"Brand:header_news" /> 
  <"Brand:header_forum" /> 
  <"cb"></div> 
  <div class="brand-news-nav pjax"> 
    <ul class="clearfix"> 
      <li <"selected"'; "first" href="{:U("Brand/$action_name")}">全部</a></li> 
      <volist name="cat_list" id="vo" key="i"> 
        <li <"selected"'; "{:U("Brand/$action_name",array('cat'=>$vo['id']))}">{$vo.name}</a></li> 
      </volist> 
    </ul> 
  </div> 
 
  <script type="text/javascript"> 
    $(function(){ 
      $(document).pjax('.pjax a', '#pjax-container',{ 
        type:'post', 
        scrollTo:false, 
      }); 
      $(document).on('pjax:click', function() { 
        enable_loading = false; 
      }) 
      $(document).on('pjax:send', function(){ 
        var str = "<p class='tc mt-10'>加载中...</p>"; 
        $('#pjax-container').html(str); 
      }) 
 
      //最后一个右侧加边框 
      $(".brand-news-nav ul li").last().children('a').addClass('last'); 
      $(".brand-news-nav ul li").click(function(){ 
        $(this).addClass('selected').siblings().removeClass('selected'); 
      }) 
    }) 
  </script> 
 
  <!-- 文章列表页 --> 
  <div class="wrap clearfix"> 
    <div class="brand-news-list fl" id="pjax-container"> 
      <include file="Brand:article_pjax" /> 
    </div> 
    <div class="brand-news-right fr pb-20"> 
      <a href="{$adv3[0]['url']}"><img class="scrollLoading" data-url="{$adv3[0]['images']|showImagePath}" src="/UploadFiles/2021-04-02/loading270x160.gif">


服务端代码





if(is_pjax()){ 
  $this->display('article_pjax'); 
}else{ 
  $this->display('article'); 
} 








//判断是否是pjax请求 
function is_pjax(){ 
  return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX']; 
} 





其中的主要思想就是当.pjax a进行点击的时候，将#pjax-container的内容替换为请求后的内容。在后端处理时需要判断是否是pjax请求，如果是需要进行局部渲染，如果不是进行全部渲染。




因为pjax用到了HTML5技术，如果浏览器不支持Html5那么网站会正常进行跳转式的加载，如果支持那么只是进行局部渲染（但是浏览器地址栏中的url会正常跟着a链接进行变动）。




注意上述的js代码中在配置pjax时有个参数scrollTo:false,加上此参数表示点击连接后网页的scrollBar不会变动，如没有此参数，每次点击时浏览视窗会自动跳转到网页顶部


小结：Pjax实际就是从服务器端返回一段代码片段，而不用刷新页面，并且同时对 url 地址进行修改，这样可以节省资源加载，提升页面加载速度。


附： pjax的github项目地址 https://github.com/defunkt/jquery-pjax


                                

                                

                                     

                                

                                    标签：
                                        
jquery.pjax.js教程,jquery,pjax,实例,jquery.pjax.js,下载

                                     

                            

                        

                        

                            

                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            

                        

                        

                            
                            
                        

                        
                        
狼山资源网 Copyright www.pvsay.com

                        

                            

                                
                                
                                    评论“jQuery+pjax简单示例汇总”
                                
                            

                            

                                

                                    
                                    

                                    

                                        
暂无“jQuery+pjax简单示例汇总”评论...
www.pvsay.com 狼山资源网
29,905影音资源
44,626技术资源
11,817软件资源
578,645站长资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
狼山资源网 Copyright www.pvsay.com