关于PJAX局部刷新

2015年6月14日

Finally

diy emlog教程建站教程 Pjax

首页精选推荐模板插件美图秀秀视频合集 VIP专区更多功能

2015年6月14日 9条评论收藏

关于PJAX局部刷新

前言部分

本教程最先来自鬼少博客，后论坛有人补充搜索和评论，然后又被各种转载，转完甚至还有阉割现象，导致会出现各种问题,于是，我这里再重发一次。虽然注释很清楚，但是，还有很多人看不懂，所以，我这里做了个视频，我想只要不是特别笨的，基本都看得懂了。

视频教程

如果高清还看不清，请点击此处

文字教程

先添加必要文件：

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery.pjax/1.9.5/jquery.pjax.min.js"></script>

然后下面加上：

<script type="text/javascript" language="javascript">
$(function() {
$(document).pjax('a[target!=_blank]', '#content', {fragment:'#content', timeout:6000}); //这是a标签的pjax。#content 表示执行pjax后会发生变化的id，改成你主题的内容主体id或class。timeout是pjax响应时间限制，如果在设定时间内未响应就执行页面转跳，可自由设置。
$(document).on('submit', 'form', function (event) {$.pjax.submit(event, '#content', {fragment:'#content', timeout:6000});}); //这是提交表单的pjax。form表示所有的提交表单都会执行pjax，比如搜索和提交评论，可自行修改改成你想要执行pjax的form id或class。#content 同上改成你主题的内容主体id或class。
    $(document).on('pjax:send', function() {
          $(".pjax_loading,.pjax_loading1").css("display", "block");//参考的loading动画代码
          //执行pjax开始，在这里添加要重载的代码，可自行添加loading动画代码。例如你已调用了NProgress，在这里添加 NProgress.start();
          });
    $(document).on('pjax:complete', function() {
          $(".pjax_loading,.pjax_loading1").css("display", "none");//参考的loading动画代码
          //执行pjax结束，在这里添加要重载的代码，可自行添加loading动画结束或隐藏代码。例如NProgress的结束代码 NProgress.done();
          });
});
</script>
<div class="pjax_loading"></div>
<div class="pjax_loading1"></div>

参考css代码（可自己去百度搜索，本站也有）

.pjax_loading {position: fixed;top: 45%;left: 45%;display: none;z-index: 999999;width: 124px;height: 124px;background: url('images/pjax_loading.gif') 50% 50% no-repeat;}
.pjax_loading1 {position: fixed;top: 0;left: 0;z-index: 999999;display: none;width: 100%;height: 100%;background-color: #4c4c4c;opacity: .2}

参考gif动画

1.前面引用的jquery.pjax.min.js是国外大神写的jquery开源的pjax通用封装插件。
2.网上很多以上封装的教程都没有加上form事件，所以这个教程主要是解决博客的搜索和评论问题。
3.开源Pjax使用这个：https://github.com/defunkt/jquery-pjax
4.如果有需要加播放器的朋友，请进入这个页面https://emlog.jiaozi.pro/grfx/em_player.html

1003

支付宝扫一扫
微信扫一扫
企鹅扫一扫

本文标签： diy emlog教程建站教程 Pjax

本文链接：关于PJAX局部刷新 - https://emlog.jiaozi.pro/pjax_form.html

css控制不溢出,不换行,溢出部分省略号显示

发表评论

评论：9条评论

小木鱼 Lv.1 评论于 2016-12-19 00:05 广西南宁市联通

视频看不了了
回复
wrz博客 Lv.2 评论于 2016-02-25 08:07 湖北省武汉市电信

看看，学习了
回复
匿名 Lv.1 评论于 2015-11-17 17:45 广东省广州市电信

不错
回复
小小的太阳 Lv.1 评论于 2015-11-17 10:48 浙江省移动数据上网公共出口

大大。虽然成功了。但问题出现了，点击文章后动画一直出现页面没变动查看源代码却变已经变了。
回复
康圳 Lv.1 评论于 2015-08-23 15:34 湖南省长沙市电信

支持一下
回复