专栏首页IT码农yii2使用pjax翻页无刷新

yii2使用pjax翻页无刷新

注意坑:

1.pjax必须包含使用到的所有js,也就是在页面中被应用到的pjax,都要被包含,否则js会在第一次执行pjax后失效

试图层

use yii\widgets\Pjax;
<?php Pjax::begin(); ?>

内容代码

<?php Pjax::end(); ?>

yii2框架自带的pjax,不需要额外的代码

pjax的一些配置

<?php Pjax::begin(['enablePushState' => false]); ?>

可以不显示刷新效果

案例:

Pjax是JQuery的插件,结合ajax和Html5的pushState技术来实现异步刷新,每次通过a标签点击和form表单提交向服务器发送一个指定的请求之后,服务器都会返回需要更新的内容,Pjax会更新老旧内容以及向浏览记录中加入一条新的url而不需要更新刷新整个页面。 Yii2 framework提供了一个Pjax widget帮助我们快速简洁的使用Pjax. 1. 引入Pjax

<?php
use yii\widgets\Pjax;
?>
  1. 添加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
    ]);
}

本例实现多个超链接指向不同的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
    ]);
}

相关问题:

问题1:关于pjax中的局部刷新,整个页面刷新会跳转页面的问题

pjax中的局部刷新中,改变了地址栏中的url改变了,当整个页面刷新时,整个页面跳转了,有没有什么好的解决办法,求具体代码?

解决:

1.可能是pjax获取数据超时导致的默认行为:直接访问a标签。Pjax::begin(['id' => 'admin-crud-id', 'timeout' => false]);这样不设置超时,或者给个比较大的值应该可以解决问题。

2.没有拦截页面的默认事件, 例如点击 <a><button> 时, 执行 pjax 的同时,浏览器跳转了。 在你程序第一行,首先应该 event.preventDefault(), 用法自己搜;然后再写 history 和 ajax 的逻辑

3.

<?php Pjax::begin(
    [
        'enablePushState' => false,
        'timeout'         => 10000,
    ]
); ?>timeout要设置长一些。

G

M

T

Detect languageAfrikaansAlbanianArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanLaoLatinLatvianLithuanianMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPersianPolishPortuguesePunjabiRomanianRussianSerbianSesothoSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshYiddishYorubaZulu

AfrikaansAlbanianArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanLaoLatinLatvianLithuanianMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPersianPolishPortuguesePunjabiRomanianRussianSerbianSesothoSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshYiddishYorubaZulu

Text-to-speech function is limited to 200 characters

Options : History : Feedback : Donate

Close

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • yii2 引入第三方类库

    在web应用的开发模式下,我们不可避免的总会遇到对第三方api的集成。比如支付宝支付和微信支付的sdk,再或者是各种短信api比如阿里大于的sdk集成等等等等。...

    botkenni
  • PageInfo使用

    botkenni
  • java中使用PageInfo分页的几种方式总结(案例)-工作总结仅供自己学习

    botkenni
  • Excel应用实践23: 突出显示每行中的最小值

    在工作表中有很多数据,想要自动标识出每行数据中最小值所在的单元格,这样方便快速找到每行中的最小数据,如下图1所示。

    fanjy
  • webpack4.0各个击破(2)—— CSS篇

    以webpack4.0版本为例来演示CSS模块的处理方式,需要用到的插件及功能如下:

    大史不说话
  • 前端基础-json-server与axios

    一个项目从立项开始,一般都是前后端同时进行编码工作的,而此时前端需要的接口和数据后台都是无法提供的;

    cwl_java
  • kubernetes系列教程(九)初识Pod存储管理

    上一篇文章中kubernetes系列教程(八)Pod健康检查机制介绍了kubernetes中Pod健康检查机制,通过实战介绍了kubernetes中两种健康检查...

    HappyLau谈云计算
  • Hessian体验与分析【面试+工作】

    Hessian是一个轻量级的remoting onhttp工具,使用简单的方法提供了RMI的功能;相比WebService,Hessian更简单、快捷。

    奋斗蒙
  • 【视频公开课】reactJs生命周期

    温馨提示:视频请点此观看 这一期的视频,是先行者计划中“前端技术体系-视频教程”中的一期。 今次把它拿出来做公开课,大家一起学习,共同进步。 先行者计划的成...

    web前端教室
  • 独立的小易

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    喜欢ctrl的cxk

扫码关注云+社区

领取腾讯云代金券