php局部异步加载页面,pjax+thinkphp5实现url跳转网页局部刷新效果

使用ajax来异步加载数据列表不利于SEO优化，页面局部刷新URL地址不变，虽然说用户体验比全页面刷新好一点，可是爬虫爬取会认为是一个页面，影响收录。这里将介绍使用Pjax加载页面，实现URL跳转网页局部刷新效果。

后台框架服务使用thinkphp5，前台渲染加载使用Pjax。

thinkphp5代码：

文件 controller/home/index.php

/**

* pjax 渲染

* @param  [type] $data [description]

* @return [type]       [description]

*/

protected function render_pjax($data)

{

$this->assign('data', $data);

if ($this->request->isPjax())

{

$this->view->engine->layout(false);

exit($this->fetch('pjaxlist'));

} else {

return $this->fetch();

}

}

public function index ()

{

$data = []; // 查询数据

return $this->render_pjax($data);

}

javascript:

pjax有多种请求加载渲染方式，点击链接加载比较简单，这里实现这种比较通用的，可以放到js方法中。

$.pjax({

container:'#pjax-container',

url:pjax_url,  // pjax 请求地址

timeout:6000,  // 超时时间  超时将全页面跳转刷新

push:true,

scrollTo:100px,  // 向上滚动

});

HTML:

文件 view/home/pjaxlist.html

文件 view/home/index.html

加载内容

function load()

{

var pjax_url = '/home/index';

$.pjax({

container:'#pjax-container',

url:pjax_url,  // pjax 请求地址

timeout:6000,  // 超时时间  超时将全页面跳转刷新

push:true,

scrollTo:100px,  // 向上滚动

});

}