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

目录

• 前言
• 什么是局部刷新？
• 优势和弊端？
• 实现流程
• 案列

前言

什么是局部刷新？

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

优势和弊端？

优势：

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

弊端：

• 不利于优化！
  第一次从服务器端获取的内容不包含需要动态绑定的数据，所以页面的源代码中没有这些内容，不利于收录，后期通过js添加到页面中的内容，并不会写在页面的源代码中~
• 时间上的些许浪费，没有服务器端渲染页面呈现速度快！
  交由客户端渲染，首先需要把页面呈现，然后再通过js的异步ajax请求获取数据，然后数据绑定，浏览器再把动态增加的部分重新渲染，这样就浪费了一些时间，没有服务器端渲染页面速度快！！！

实现流程

• 通过前端一部请求到后端接口
• 通过模板语法 返回页面: : 刷新的标记
• 前端渲染页面 th:fragment="刷新的标记"

案列

首先我们需要先右键new一个springboot项目

配置pom依赖：

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.7.2
         
    
    com.example
    demo
    0.0.1-SNAPSHOT
    demo
    demo
    
        1.8
    
    
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

配置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

    
    
    


获取列表


    

        
用户
    
    

        
[[${list}]]
    

到此这篇关于SpringBoot+thymeleaf+ajax实现局部刷新详情的文章就介绍到这了,更多相关SpringBoot thymeleaf 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！