Yii2 Pjax 使用
来源:互联网 发布:淘宝军刺暗语 编辑:程序博客网 时间:2024/05/19 00:17
来源:http://kezhongke.github.io/2017/06/27/Yii2-Pjax-Tutorial/
参考:Yii2 Pjax Tutorial
Pjax是JQuery的插件,结合ajax和Html5的pushState技术来实现异步刷新,每次通过a标签点击和form表单提交向服务器发送一个指定的请求之后,服务器都会返回需要更新的内容,Pjax会更新老旧内容以及向浏览记录中加入一条新的url而不需要更新刷新整个页面。
Yii2 framework提供了一个Pjax widget帮助我们快速简洁的使用Pjax.
1. 引入Pjax
<?phpuse yii\widgets\Pjax;?>
- 添加Pjax包裹住需要更新的内容部分
<?php Pjax::begin(); ?>这部分内容需要更新<?php Pjax::end(); ?>
你也可以选择配置哪个链接和form表单使用Pjax,是否将新的Url添加到浏览记录,替换或者保持原样。如果Pjax没有响应,超时之后页面将会重新加载。
Yii2 Pjax Examples
Refresh
本例是一个简单的点击超链接来实现刷新时间,通过Pjax widget实现异步刷新。这里有一个在线的示例:Demo
<?php Pjax::begin()?><?=Html::a('刷新时间', ['site/index'], ['class' => 'btn btn-primary'])?><h3>刷新的时间为:<?=$time?></h3><?php Pjax::end()?>
所有被包裹在Pjax widget中的a标签和form都会发送一个Pjax请求.
控制器渲染和提供数据给页面
public function actionIndex(){ $time = date('Y-m-d H:i:s', time()); return $this->render('index', [ 'time' => $time ]);}
Navigation
本例实现多个超链接指向不同的Controller Actions,返回不同的内容,在线示例Demo
<?php Pjax::begin();?><?=Html::a("显示时间", ['site/time'], ['class' => 'btn btn-primary'])?><?=Html::a("显示日期", ['site/date'], ['class' => 'btn btn-primary'])?><h2>显示的数据为:<?=$response?></h2><?php Pjax::end();?>
控制器中代码为:
public function actionDate(){ return $this->render('time-date', [ 'response' => date('Y-m-d') ]);}public function actionTime(){ return $this->render('time-date', [ 'response' => date('H:i:s') ]);}
Form提交数据
一个Form表单提交数据的在线示例:Demo,示例中Pjax包裹一个Form表单,里边有一个输入框和提交按钮以及下边的响应数据。
- 注意:Form表单必须添加 data-pjax
<?php Pjax::begin();?><?=Html::beginForm(['site/submit'], 'post', ['data-pjax' => ''])?><?=Html::textInput('name')?><?=Html::submitButton('加密')?><?= Html::endForm()?><h2>返回加密数据:<?=$hash?></h2><?php Pjax::end();?>
控制器中提交代码
public function actionSubmit(){ $security = new Security(); $name = Yii::$app->request->post('name'); $hash = ''; if(!is_null($name)){ $hash = $security->generatePasswordHash($name); } return $this->render('submit', [ 'hash' => $hash ]);}
由于表单是POST请求,pushState没有触发,地址栏Url也不会更新.
禁用pushState
有时候我们需要禁用pushState,更新数据的同时,保持Url不变,在线示例Demo,一个简单的投票示例代码,Pjax配置参数enablePushState需设置为false
<?php Pjax::begin(['enablePushState' => false]);?><?=Html::a('加一', ['site/upvote'], ['class' => 'btn btn-primary'])?><?=Html::a('减一', ['site/downvote'], ['class' => 'btn btn-primary'])?><h2>投票数为:<?=Yii::$app->session->get('vote', 0)?></h2><?php Pjax::end();?>
控制器部分投票逻辑
public function actionVote(){ return $this->render('vote');}public function actionUpvote(){ $vote = Yii::$app->session->get('vote', 0); Yii::$app->session->set('vote', ++$vote); return $this->render('vote');}public function actionDownvote(){ $vote = Yii::$app->session->get('vote', 0); Yii::$app->session->set('vote', --$vote); return $this->render('vote');}
GridView分页
有一个在线的Demo,展示了GridView结合Pjax使排序,过滤,分页异步加载.
<?php Pjax::begin();?><?=GridView::widget([ 'dataProvider' => $dataProvider, 'columns' => [ 'name' ]])?><?php Pjax::end();?>
控制器中提供数据:
public function actionGrid(){ $models = [ ['name' => 123] ]; $dataProvider = new ArrayDataProvider([ 'allModels' => $models, 'pagination' => [ 'pageSize' => 3 ] ]); return $this->render('grid', [ 'dataProvider' => $dataProvider ]);}
结束
好的建议,请告知我。
- Yii2 Pjax 使用
- Yii2 中 ActiveForm 和 GridView 使用 Pjax
- yii2-pjax更新
- Yii2学习笔记(七):Pjax的使用
- Yii2 framework学习笔记(九) -- pjax
- pjax使用心得总结
- pjax使用心得
- Pjax的学习使用
- pjax使用小结
- Pjax
- pjax
- 在THinkPHP中使用pjax
- yii2使用
- Yii2 yii2-imagine的使用
- pjax 和 NProgress.js 的研究和使用
- yii使用自带组件pjax的请求
- Bootstrap-Iconpicker 和pjax插件一起使用图标加载问题
- pjax分页
- DB2 的REORG_学习(4)_表和索引重组的分析
- 分支定界法——0-1背包问题
- openldap 镜像同步慢的问题解决
- 和Postgresql系统监控有关的几个标准统计视图
- hibernate的dao层
- Yii2 Pjax 使用
- UE4 本地化文本语言修改
- linux系统编程之管道(二):管道读写规则
- “玲珑杯”线上赛 Round #15 河南专场 F -- 咸鱼文章
- Eclipse C/C++ 开发环境搭建
- sklearn之DTS学习
- iptables--知识总结2
- ExtGrid行项动态变色且选中行可复制
- [android] 手机卫士自定义控件的属性