如何使用SpringBoot和Thymeleaf结合Ajax实现页面局部刷新功能？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1190个文字，预计阅读时间需要5分钟。
目录+前言+什么是局部刷新？+优势和端点+实现流程+案例+前言+什么是局部刷新？+简而言之，就是当我发送一个请求到后端后，取得数据后返回当前页面，页面不会对整个页面进行重载
目录
- 前言
- 什么是局部刷新？
- 优势和弊端？
- 实现流程
- 案列
前言
什么是局部刷新？
简而言之，就是当我发送一个请求到后端后拿到数据后返回当前 页面不会对整个页面进行重载而只对当前请求的模块进行刷新。
优势和弊端？
优势：
- 用户体验好，不需要对页面进行重载
- 利于开发人员开发，提高开发效率
- 前后端完全分离
弊端：
- 不利于优化！
第一次从服务器端获取的内容不包含需要动态绑定的数据，所以页面的源代码中没有这些内容，不利于收录，后期通过js添加到页面中的内容，并不会写在页面的源代码中~ - 时间上的些许浪费，没有服务器端渲染页面呈现速度快！
交由客户端渲染，首先需要把页面呈现，然后再通过js的异步ajax请求获取数据，然后数据绑定，浏览器再把动态增加的部分重新渲染，这样就浪费了一些时间，没有服务器端渲染页面速度快！！！
实现流程
- 通过前端一部请求到后端接口
- 通过模板语法 返回页面: : 刷新的标记
- 前端渲染页面
th:fragment="刷新的标记"
案列
首先我们需要先右键new一个springboot项目
配置pom依赖：
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="maven.apache.org/POM/4.0.0" xmlns:xsi="www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="maven.apache.org/POM/4.0.0 maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.2</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.example</groupId> <artifactId>demo</artifactId> <version>0.0.1-SNAPSHOT</version> <name>demo</name> <description>demo</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
配置yml文件
server: port: 8080 # Spring配置 spring: # 模板引擎 thymeleaf: # 禁用缓存 cache: false prefix: classpath:/templates/ suffix: .html mode: HTML encoding: utf-8
编写接口：
package com.example.demo.web; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import java.util.ArrayList; import java.util.List; /** * @Program: demo * @ClassName WebController * @Author: LiuTao * @Description: SpringBoot+thymeleaf+ajax实现局部刷新测试接口类 * @Create: 2022-07-24 0:29 * @Version 1.0 **/ @Controller public class WebController { /** * @methodName: list * @description: 测试接口 * @Author LiuTao * @param [model] * @updateTime 2022/7/24 0:33 * @return java.lang.String * @throws **/ @RequestMapping("/list") public String list(Model model) { List lists = new ArrayList(); lists.add("aaaa"); lists.add("bbbb"); lists.add("cccc"); lists.add("dddd"); model.addAttribute("list",lists); return "index::list"; } }
在templates包下新建一个index.html
<!DOCTYPE html> <html lang="en" xmlns:th="www.thymeleaf.org"> <head> <meta charset="UTF-8" /> <title>Title</title> <script th:src="@{/jquery.min.js}"></script> </head> <body> <button onclick="list()">获取列表</button> <table border="1" th:fragment="list" id="list" > <thead> <th>用户</th> </thead> <tr th:each="list:${list}"> <td>[[${list}]]</td> </tr> </table> </body> <script> function list(){ //第一种方法 // $('#search').load("/list"); //第二种方法 $.ajax({ url: "/list", type: 'POST', success: function (data) { $("#list").html(data); } }) } </script> </html>
到此这篇关于SpringBoot+thymeleaf+ajax实现局部刷新详情的文章就介绍到这了,更多相关SpringBoot thymeleaf 内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！
本文共计1190个文字，预计阅读时间需要5分钟。
目录+前言+什么是局部刷新？+优势和端点+实现流程+案例+前言+什么是局部刷新？+简而言之，就是当我发送一个请求到后端后，取得数据后返回当前页面，页面不会对整个页面进行重载
目录
- 前言
- 什么是局部刷新？
- 优势和弊端？
- 实现流程
- 案列
前言
什么是局部刷新？
简而言之，就是当我发送一个请求到后端后拿到数据后返回当前 页面不会对整个页面进行重载而只对当前请求的模块进行刷新。
优势和弊端？
优势：
- 用户体验好，不需要对页面进行重载
- 利于开发人员开发，提高开发效率
- 前后端完全分离
弊端：
- 不利于优化！
第一次从服务器端获取的内容不包含需要动态绑定的数据，所以页面的源代码中没有这些内容，不利于收录，后期通过js添加到页面中的内容，并不会写在页面的源代码中~ - 时间上的些许浪费，没有服务器端渲染页面呈现速度快！
交由客户端渲染，首先需要把页面呈现，然后再通过js的异步ajax请求获取数据，然后数据绑定，浏览器再把动态增加的部分重新渲染，这样就浪费了一些时间，没有服务器端渲染页面速度快！！！
实现流程
- 通过前端一部请求到后端接口
- 通过模板语法 返回页面: : 刷新的标记
- 前端渲染页面
th:fragment="刷新的标记"
案列
首先我们需要先右键new一个springboot项目
配置pom依赖：
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="maven.apache.org/POM/4.0.0" xmlns:xsi="www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="maven.apache.org/POM/4.0.0 maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.2</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.example</groupId> <artifactId>demo</artifactId> <version>0.0.1-SNAPSHOT</version> <name>demo</name> <description>demo</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
配置yml文件
server: port: 8080 # Spring配置 spring: # 模板引擎 thymeleaf: # 禁用缓存 cache: false prefix: classpath:/templates/ suffix: .html mode: HTML encoding: utf-8
编写接口：
package com.example.demo.web; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import java.util.ArrayList; import java.util.List; /** * @Program: demo * @ClassName WebController * @Author: LiuTao * @Description: SpringBoot+thymeleaf+ajax实现局部刷新测试接口类 * @Create: 2022-07-24 0:29 * @Version 1.0 **/ @Controller public class WebController { /** * @methodName: list * @description: 测试接口 * @Author LiuTao * @param [model] * @updateTime 2022/7/24 0:33 * @return java.lang.String * @throws **/ @RequestMapping("/list") public String list(Model model) { List lists = new ArrayList(); lists.add("aaaa"); lists.add("bbbb"); lists.add("cccc"); lists.add("dddd"); model.addAttribute("list",lists); return "index::list"; } }
在templates包下新建一个index.html
<!DOCTYPE html> <html lang="en" xmlns:th="www.thymeleaf.org"> <head> <meta charset="UTF-8" /> <title>Title</title> <script th:src="@{/jquery.min.js}"></script> </head> <body> <button onclick="list()">获取列表</button> <table border="1" th:fragment="list" id="list" > <thead> <th>用户</th> </thead> <tr th:each="list:${list}"> <td>[[${list}]]</td> </tr> </table> </body> <script> function list(){ //第一种方法 // $('#search').load("/list"); //第二种方法 $.ajax({ url: "/list", type: 'POST', success: function (data) { $("#list").html(data); } }) } </script> </html>
到此这篇关于SpringBoot+thymeleaf+ajax实现局部刷新详情的文章就介绍到这了,更多相关SpringBoot thymeleaf 内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！