内容简介:先看效果图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项目刷新当前页
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
豆瓣,流行的秘密
黄修源 / 机械工业出版社 / 2009-9 / 29.00
380万人为何会齐聚豆瓣? HIN1和SARS是如何传播扩散开的? 贾君鹏何以快速窜红网络? 通过创新扩散的理论的分析和说明,给出了所有这些问题的答案! 这本书从豆瓣的流行现象说开来,应用了创新扩散等传播学道理来解释了豆瓣如何流行起来,同时作者还同时用创新扩散的理论解释了为何会出现世界变平的现象,长尾理论,SARS病毒的高速传播等。 作者以前任豆瓣设计师的身份以自己亲......一起来看看 《豆瓣,流行的秘密》 这本书的介绍吧!