黄聪：pjax使用心得总结

初次结识pjax是在使用tower时钟发现的。当时使用时发现网站可以局部刷新，当然我们知道使用ajax也是可以实现局部刷新的。

然而我们知道，使用ajax进行局部刷新时网站的title是不会变化的，并且使用浏览器的后退按钮也不能使网站返回上个状态，这时候我们就需要使用pjax了。

关于pjax，推荐先阅读几个文章

http://my.oschina.net/sub/blog/123447?fromerr=s5Bgun3z

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

在github的项目地址里有关于pjax的详细说明和使用方法，这里不再赘述，本文主要是使用中的一些代码记录和使用心得，方便以后查阅快速上手使用。

看下下述小段代码：

[html] view plain copy

<div class="body">
<?php $action_name = $Think.ACTION_NAME; ?>
<?php if ($action_name == 'news'): ?>
<include file="Brand:header_news" />
<?php elseif ($action_name == 'forum'): ?>
<include file="Brand:header_forum" />
<?php endif; ?>
<div class="cb"></div>
<div class="brand-news-nav pjax">
<ul class="clearfix">
<li <?php if($_GET['cat'] == '') echo 'class="selected"'; ?>><a class="first" href="{:U("Brand/$action_name")}">全部</a></li>
<volist name="cat_list" id="vo" key="i">
<li <?php if($_GET['cat'] == $vo['id']) echo 'class="selected"'; ?>><a href="{: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="__PUBLIC__/index/images/loading270x160.gif" width="260" height="150"></a>
<p class="title mt-10">法律支持</p>
<ul class="bgc-fff">
<volist name="law_list" id="vo">
<a href="{:U('law',array('id'=>$vo['id']))}"><li>{$vo.name}</li></a>
</volist>
</ul>
<button class="btn btn-right mt-10 btn-consult">免费咨询</button>
<script type="text/javascript">
$(function(){
//最后一个需要添加一个last的样式
$(".brand-news-right li:last").addClass('last');
})
</script>
</div>
</div>
</div>

服务器端处理

[php] view plain copy

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

[php] view plain copy

//判断是否是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不会变动，如没有此参数，每次点击时浏览视窗会自动跳转到网页顶部

转载于:https://www.cnblogs.com/huangcong/p/8652276.html

黄聪：pjax使用心得总结相关推荐

黄聪：如何使用CodeSmith批量生成代码(转：http://www.cnblogs.com/huangcong/archive/2010/06/14/1758201.html)...
先看看CodeSmith的工作原理: 简单的说:CodeSmith首先会去数据库获取数据库的结构,如各个表的名称,表的字段,表间的关系等等,之后再根据用户自定义好的模板文件,用数据库结构中的关键字替代 ...
黄聪：如何使用CodeSmith批量生成代码(原创系列教程)
在上一篇我们已经用PowerDesigner创建好了需要的测试数据库,下面就可以开始用它完成批量代码生成的工作啦. 下面我会一步步的解释如何用CodeSmith实现预期的结果的,事先声明一下,在此只做 ...
黄聪：《跟黄聪学WordPress插件开发》
续<跟黄聪学WordPress主题开发>之后,又一个作品完成!<跟黄聪学Wordpress插件开发>,国内最好的Wordpress插件开发视频教程!! 目录预览: WordPr ...
黄聪：Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级)
原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级) 本章介绍的是企业库加密应用程序模块 ...
黄聪：C# MP3操作类,能播放指定的mp3文件,或播放嵌入的资源中的Mp3文件
以下为我写的Mp3操作类源代码: using System; using System.Collections.Generic; using System.Linq; using System.Tex ...
黄聪：C#编写的Word操作类,有换页,添加表格,文本功能
最近要帮老师做个工资管理系统,需要自动生成Word. 就上网找了个Word操作类,再做了点修改,下面公布一下自己的代码: using System; using System.Collections. ...
黄聪：一个拼图工具的制作思路
测试简图: 功能简介: 1.双击左窗口可打开源图像; 2.框选左窗口可把图像选取复制到右窗口; 3.剪取的图块可以移动, 可配合 Ctrl 单选或多选, 可用 Delete 删除选择的图块; 4.双击 ...
黄聪：wordpress教程
又一个作品完成!<跟黄聪学Wordpress主题开发>,国内最好的Wordpress主题模版开发视频教程!! 目录预览: WordPress官方源文件层式结构讲解 WordPress数据库 ...
c# 计算空格宽度像素_黄聪：C#如何通过MeasureString、Graphics获取字符串的像素长度...
1. 使用g.MeasureString()获得使用MeasureString测量出来的字符宽度,总是比实际宽度大一些,而且随着字符的长度增大,貌似实际宽度和测量宽度的差距也越来越大了.查了一 ...
黄聪:phpexcel中文教程-设置表格字体颜色背景样式、数据
首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把class ...

黄聪：pjax使用心得总结

黄聪：pjax使用心得总结相关推荐

最新文章

热门文章