使用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
<ul> <! -- 循环 --> <li> <！-- 赋值 -- > </li> <! -- 循环 --> </ul>
文件 view/home/index.html
<html>
<head>
<script src="jquery.js"></script>
<script src="jquery.pjax.js"></script>
</head>
<body>
<div id="pjax_container">
<!-- 加载内容 -->
</div>
<a href="javascript:load()">加载内容</a>
<script>
function load()
{
var pjax_url = '/home/index';
$.pjax({
container:'#pjax-container',
url:pjax_url, // pjax 请求地址
timeout:6000, // 超时时间 超时将全页面跳转刷新
push:true,
scrollTo:100px, // 向上滚动
});
}
</script>
</body>
</html>
热门文章
