SpringBoot+thymeleaf+ajax实现局部刷新详情

更新时间：2022年09月23日 11:42:48 作者：晚上睡不着_

这篇文章主要介绍了SpringBoot+thymeleaf+ajax实现局部刷新详情，文章围绕主题展开详细的内容介绍具有一定的参考价值，需要的小伙伴可以参考一下

前言

什么是局部刷新？

简而言之，就是当我发送一个请求到后端后拿到数据后返回当前页面不会对整个页面进行重载而只对当前请求的模块进行刷新。

优势和弊端？

优势：

用户体验好，不需要对页面进行重载
利于开发人员开发，提高开发效率
前后端完全分离

弊端：

不利于优化！
第一次从服务器端获取的内容不包含需要动态绑定的数据，所以页面的源代码中没有这些内容，不利于收录，后期通过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 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

springboot连接不同数据库的写法详解
这篇文章主要介绍了springboot连接不同数据库的写法 ,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
SpringBoot内置tomcat参数调优的实现
springboot内置了tomcat, 并给我们设置了默认参数, 我们怎么样修改springboot内置的tomcat参数,本文就详细的来介绍一下,感兴趣的可以了解一下
2023-09-09
SpringBoot入门之集成JSP的示例代码
这篇文章主要介绍了SpringBoot入门之集成JSP的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
java_String和StringBuffer区别分析
JAVA平台提供了两个类：String和StringBuffer，它们可以储存和操作字符串，即包含多个字符的字符数据。这个String类提供了数值不可改变的字符串。
2013-04-04
Java常用时间工具类总结(珍藏版)
这篇文章主要为大家详细介绍了Java中一些常用时间工具类的使用示例代码，文中的代码简洁易懂，对我们学习Java有一定帮助，需要的可以参考一下
2022-07-07
Java Map 按照Value排序的实现方法
Map是键值对的集合接口，它的实现类主要包括：HashMap,TreeMap,Hashtable以及LinkedHashMap等。这篇文章主要介绍了Java Map 按照Value排序的实现方法,需要的朋友可以参考下
2016-08-08
SpringCloud Gateway中GatewayFilterChain执行流程详解
Spring Cloud Gateway旨在为微服务架构提供一种简单有效的、统一的 API 路由管理方式。Spring Cloud Gateway 作为 Spring Cloud 生态系中的网关，它不仅提供统一的路由方式，并且基于 Filter 链的方式提供了网关基本的功能，例如：安全、监控/埋点和限流等
2022-10-10
java后台利用Apache poi 生成excel文档提供前台下载示例
本篇文章主要介绍了java后台利用Apache poi 生成excel文档提供前台下载示例，非常具有实用价值，需要的朋友可以参考下
2017-05-05
Java程序员必备的11大IntelliJ插件(附地址)
这篇文章主要介绍了Java程序员必备的11大IntelliJ插件(附地址)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
在java中利用匿名内部类进行较简洁的双括弧初始化的方法
本篇文章小编将为大家介绍，关于在java中利用匿名内部类进行较简洁的双括弧初始化的方法，有需要的朋友可以参考一下
2013-04-04