使用 Pjax 的 Jsp显示问题

Question

后台框架:spring mvc
背景：
为了达到局部刷新，准备使用Pjax作为数据传输，请求返回的刷新内容就是没有header footer的jsp页面，但是在提交url或者刷新当前页面的时候，返回的也是这个jsp，没有css js header footer，整站垮掉....

怎么可以做到
1.在pjax请求的时候可以返回不带header footer 的页面
2.在刷新页面或者URL请求的时候可以返回带header footer 的页面

有没有人给一些思路？

1.做两套页面一套包含头尾信息，一套不包含
2.后台追加一个变量去存储是否加头尾信息，所有页面都加头尾，根据变量判断是否生成。

我能想到这两个都太想要

可以参照：http://demo.admui.com
不知道是怎么实现的

Answer 1

题主你可以试试加入路由控制,spa 首位不变 只是局部刷新 你监听路由更改导入对应的视图就ok了

Answer 2

自己追加了一个拦截器

//是Pjax提交的就直接跳过该拦截
if (request.getHeader("X-PJAX") != null) {
    return true;
}

不是pjax(也就是刷新或者直接输入URL的时候),重定向到一个只包含头尾信息的页面，

String contextPath = request.getContextPath();
response.sendRedirect(contextPath + "/重定向的页面?__redirectby=" + request.getRequestURI());
return false;

页面加载的时候在动再次用pjax 载入之前的页面URL

$(document).ready(function(){
    $.pjax.reload('#pjax-container', {url:"/前一个URL"});
});

这样虽然开发上面没有啥大的变化，但是刷新的时候会多一次Pjax的请求，
键入URL和刷新的情况应该是比较少的，影响应该不是很大。
希望有更好的解决方案。。

Answer 3

对于Pjax找了相关资料, 说的都比较详细, 我只是稍稍总结下, 详细说面见后文连接.

1. Pjax页面分为两部分. 一部分是做为HTML返回的原始页面, 也就是正常浏览器访问得到的页面; 另一部分是原始页面中可以做为Pjax响应内容的部分, 这部分可以直接被插入到占位DOM节点里.

+--------------------+
|                    |
|       Header       |
|                    |
| +----------------+ |
| |                | |
| |      Pjax      | |
| |                | |
| +----------------+ |
|                    |
|       Footer       |
|                    |
+--------------------+

1. 服务器根据X-PJAX请求头来判断是否是Pjax请求. 根据是否是Pjax请求, 对响应页面做不同的处理.

• 如果是Pjax请求, 直接返回Pjax部分

• 如果不是Pjax请求, 就要把Pjax部分放入到它对应的模板里, 解析成完整的HTML页面返回.

if (req.isPjax) {
    res.body = render('/pjax') // 渲染模板, 只不过这部分只包含`pjax`部分
} else {
    // 获取pjax部分
    const pjax = rander('/pjax')
    // 将pjax部分渲染到对应的外层模板里.
    res.body = rander(getPjaxTamplate('/pjax'), { pjaxContent: pjax })}
}

注意

1. 这里Pjax返回的不完全是被嵌入到占位DOM节点下的HTML片段. 其中包含一些其他的标签, 例如<title>标签等. 这部分可能存在不少坑, 需要看jquery-pjax的源代码.

2. 其实就是把模板渲染的逻辑反过来思考. 原先是大模板套小模板, 浏览器请求就直接返回全部渲染内容. 用Pjax后, 如果条件允许, 我直接返回小模板的内容, 如果不是Pjax请求, 再放进大模板里渲染返回. 所以Pjax内容和其对应的外部模板要有个对应关系, 如果一个页面有好几个Pjax, 这个可能比较难维护.

3. Pjax让我想起了<iframe>标签.和facebook的BigPipe. 将页面拆分为局部, 分块加载. 每一块有单独的逻辑. 页面组件化了, 但是所有的组件在服务器端. 与SPA相比, 直接访问路由管理路径能减少一次额外处理. 各有优缺点.

相关资源

jquery-pjax的README.md说明了一部分
Ruby服务端的例子

手打不易, 如果对您有帮助, 请顶一下, 谢谢