前言
什么是局部刷新？
简而言之，就是当我发送一个请求到后端后拿到数据后返回当前 页面不会对整个页面进行重载而只对当前请求的模块进行刷新。
优势和弊端？
优势：
- 用户体验好，不需要对页面进行重载
- 利于开发人员开发，提高开发效率
- 前后端完全分离
弊端：
- 不利于优化！
第一次从服务器端获取的内容不包含需要动态绑定的数据，所以页面的源代码中没有这些内容，不利于收录，后期通过js添加到页面中的内容，并不会写在页面的源代码中~ - 时间上的些许浪费，没有服务器端渲染页面呈现速度快！
交由客户端渲染，首先需要把页面呈现，然后再通过js的异步ajax请求获取数据，然后数据绑定，浏览器再把动态增加的部分重新渲染，这样就浪费了一些时间，没有服务器端渲染页面速度快！！！
实现流程
- 通过前端一部请求到后端接口
- 通过模板语法 返回页面: : 刷新的标记
- 前端渲染页面
th:fragment="刷新的标记"
案列
首先我们需要先右键new一个springboot项目
配置pom依赖：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://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="http://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 内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！