php js实现翻页效果代码,yii2使用pjax翻页无刷新

注意坑：

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

试图层

useyii\widgets\Pjax;

内容代码

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

pjax的一些配置

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

可以不显示刷新效果

案例：

Pjax是JQuery的插件，结合ajax和Html5的pushState技术来实现异步刷新，每次通过a标签点击和form表单提交向服务器发送一个指定的请求之后，服务器都会返回需要更新的内容，Pjax会更新老旧内容以及向浏览记录中加入一条新的url而不需要更新刷新整个页面。

Yii2 framework提供了一个Pjax widget帮助我们快速简洁的使用Pjax.

1. 引入Pjax

use yii\widgets\Pjax;

?>

添加Pjax包裹住需要更新的内容部分

这部分内容需要更新

你也可以选择配置哪个链接和form表单使用Pjax，是否将新的Url添加到浏览记录，替换或者保持原样。如果Pjax没有响应，超时之后页面将会重新加载。

Yii2 Pjax Examples

Refresh

本例是一个简单的点击超链接来实现刷新时间，通过Pjax widget实现异步刷新。这里有一个在线的示例：Demo

=Html::a('刷新时间', ['site/index'], ['class' => 'btn btn-primary'])?>

刷新的时间为：=$time?>

所有被包裹在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

=Html::a("显示时间", ['site/time'], ['class' => 'btn btn-primary'])?>

=Html::a("显示日期", ['site/date'], ['class' => 'btn btn-primary'])?>

显示的数据为：=$response?>

控制器中代码为：

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

=Html::beginForm(['site/submit'], 'post', ['data-pjax' => ''])?>

=Html::textInput('name')?>

=Html::submitButton('加密')?>

= Html::endForm()?>

返回加密数据：=$hash?>

控制器中提交代码

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'])?>

投票数为：=Yii::$app->session->get('vote', 0)?>

控制器部分投票逻辑

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使排序，过滤，分页异步加载.

=GridView::widget([

'dataProvider' => $dataProvider,

'columns' => [

'name'

]

])?>

控制器中提供数据：

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.没有拦截页面的默认事件， 例如点击 或 时， 执行 pjax 的同时，浏览器跳转了。

在你程序第一行，首先应该 event.preventDefault()， 用法自己搜;然后再写 history 和 ajax 的逻辑

3.

[

'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