内容简介:先看效果图pjax是啥,自行百度,关于它的兼容性可以看一下我另一篇博客:
先看效果图
pjax是啥,自行百度,关于它的兼容性可以看一下我另一篇博客: https://tomoya92.github.io/2017/04/25/nodejs-pjax/
创建项目,引入文件
使用IDEA创建一个spring-boot项目,只需要 web
freemarker
依赖就够了
引入 jquery
jquery.pjax
cdn可以使用 https://www.bootcdn.cn/
定义controller
@Controller public class PjaxController { @GetMapping("/") public String index() { return "index"; } @GetMapping("/book") public String book() { return "book"; } @GetMapping("/computer") public String computer() { return "computer"; } @GetMapping("/phone") public String phone() { return "phone"; } }
开发页面
说明:页面里的请求分两种:正常超链接、pjax请求,因为有两种,所以要开发两套layout布局
- 正常的layout里有网站用到的css, js等通用元素
- pjax的layout只是一个空布局文件,里面啥都没有
layout.ftl
<#macro html> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script> <title>Document</title> <style> html, body { margin: 0; } </style> </head> <body> <header style="background-color: green; height: 50px; width: 100%;"></header> <section> <nav style="float: left; width: 30%;background-color: bisque;"> <ul> <li><a href="/">index</a></li> <li><a href="/book" data-pjax>book (pjax)</a></li> <li><a href="/computer" data-pjax>computer (pjax)</a></li> <li><a href="/phone" data-pjax>phone (pjax)</a></li> </ul> </nav> <div id="pjax-container" style="float: right; width: 70%; background-color: aliceblue;"> <#nested /> </div> </section> <footer style="clear: both;background-color: black; height: 50px; width: 100%;color: #fff; line-height: 50px;"></footer> <script> $(document).pjax('[data-pjax] a, a[data-pjax]', '#pjax-container'); var date = new Date(); $("footer").html( date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDay() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() + ":" + date.getMilliseconds() ); </script> </body> </html> </#macro>
layout-pjax.ftl
<#macro html> <#nested /> </#macro>
拦截器处理请求类型
@Component public class PjaxInterceptor implements HandlerInterceptor { private Logger logger = LoggerFactory.getLogger(PjaxInterceptor.class); @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) { return true; } @Override public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) { Boolean pjax = Boolean.parseBoolean(request.getHeader("X-PJAX")); logger.info("is pjax: {}", pjax); if (pjax) { modelAndView.addObject("layoutName", "layout-pjax.ftl"); } else { modelAndView.addObject("layoutName", "layout.ftl"); } } @Override public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) { } }
然后配置拦截器拦截所有请求
@Component public class PjaxWebMvc extends WebMvcConfigurationSupport { @Autowired private PjaxInterceptor pjaxInterceptor; @Override protected void addInterceptors(InterceptorRegistry registry) { super.addInterceptors(registry); registry.addInterceptor(pjaxInterceptor) .addPathPatterns("/**"); } }
其它页面
说明: <#include layoutName>
里的 layoutName 就是从拦截器里设置的布局文件名
index.ftl
<#include layoutName> <@html> index page </@html>
book.ftl
<#include layoutName> <@html> <p>this is a book</p> </@html>
computer.ftl
<#include layoutName> <@html> <p>this is a computer</p> </@html>
phone.ftl
<#include layoutName> <@html> <p>this is a phone</p> </@html>
jquery.pjax 和 websocket 绝配呀,关于spring-boot里集成websocket的教程可以查看我另一篇博客 https://tomoya92.github.io/2018/08/20/spring-boot-netty-socketio/
原文链接:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Swift iOS : 上拉刷新或者下拉刷新
- Swift iOS : 上拉刷新或者下拉刷新
- 优雅地刷新RecyclerView
- 上拉加载 下拉刷新
- jQuery ajax局部刷新
- vue项目刷新当前页
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。