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

2024-10-02 12:10:25

前言

什么是局部刷新？

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

优势和弊端？

优势：

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

弊端：

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

AJAX SpringBoot 前后端数据交互的项目实现

目录 1.Ajax概述 2.基于JQuery的AJAX语法 1. Ajax 概述 Ajax 的英文全称是 ”Asynchronous JavaScript and XML“,即 ”异步的 JavaScript 和 XML“.其核心是通过 JavaScript 的 XMLHttpRequest 对象,以一种异步的方式,向服务器发送数据请求,并且通过该对象接收请求返回的数据,从而实现客户端与服务器端的数据交互. 优点:Ajax 能够刷新指定的页面区域(局部刷新),而不是刷新整个页面,从而减少客户端和
SpringBoot结合Ajax实现登录页面实例

目录一. Ajax 1.1 Ajax介绍 1.2 异步的作用二.SpringBoot应用Ajax 2.1 开发配置 2.2 创建user表 2.3 MVC三层架构 2.4 前端测试页面 2.5 测试结果总结一. Ajax 1.1 Ajax介绍 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,可以使网页实现异步更新.这意味着可以在不
Springboot解决ajax+自定义headers的跨域请求问题

1.什么是跨域由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发送请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域. 具体可以查看下表: 2.springboot如何解决跨域问题 1.普通跨域请求解决方案: ①请求接口添加注解@CrossOrigin(origins = "http://127.0.0.1:8020", maxAge
springboot如何使用thymeleaf完成页面缓存

目录使用thymeleaf完成页面缓存直接看Demo 控制层核心点是 thymeleaf简要基础知识 1.SpringBoot可整合的模板引擎技术 2.Thymeleaf常用标签(示例代码) 3.Thymeleaf主要语法 4.Thymeleaf基本使用使用thymeleaf完成页面缓存直接看Demo 注入redisservice以及其余两个bean. @Autowired private RedisService redisService; @Autowired
在SpringBoot中配置Thymeleaf的模板路径方式

目录配置Thymeleaf的模板路径关于thymeleaf配置说明配置Thymeleaf的模板路径众所周知,Thymeleaf的模板文件默认是在项目文件夹的src\main\resources\templates目录下的. 不过出于特殊需要,要修改其路径怎么办呢? 在我们的项目配置文件application.properties中,添加如下配置: #Thymeleaf配置 spring.thymeleaf.prefix=自定义的Thymeleaf的模板位置,jar内部以classpath
SpringBoot基于Shiro处理ajax请求代码实例

写一个Shiro的过滤器 import cn.erika.demo.common.model.vo.Message; import com.alibaba.fastjson.JSON; import org.apache.shiro.SecurityUtils; import org.apache.shiro.subject.Subject; import org.apache.shiro.web.servlet.AdviceFilter; import javax.servlet.Servle
SpringBoot+Thymeleaf+ECharts实现大数据可视化(基础篇)

目录 0x01 新建SpringBoot项目 2. 编写HelloWorld程序代码 0x02 引入ECharts资源 1. 获取JQuery与ECharts资源 2. 新建ECharts模版html文件 3. 添加后台java代码 4. ECharts模版样式预览 0x03 SpringBoot整合Thymeleaf 1. 新建myECharts方法 2. 引入Thymeleaf 3. ECharts新样式预览 4. 模式升级 0xFF 总结 0x01 新建SpringBoot项目 1. 新建
SpringBoot + thymeleaf 实现读取视频列表并播放视频功能

目录效果实现过程后端程序示例前端程序示例通过读取数据库video表获取当前视频的视频名.视频地址,展示至前端页面videorecord.html,通过点击播放按钮获取数据id进而得到所选视频地址,跳转播放视频显示页videoshow.html,播放所选视频.当然本案例只是为了展示主要的一些功能,其他比如跳转.页面布局美化等可以自行进行更改. 效果 Springboot播放视频实现过程后端程序示例 1. Controller层示例返回数据库数据时,使用了pagehelp当中的Pag
SpringBoot+Hutool+thymeleaf完成导出Excel的实现方法

目录 1.引入依赖 2.创建实体类 3.创建导出接口 4.创建html 5.测试导出导出Excel的框架有很多种,POI相对来说比较老了,很多Excel框架底层都是POI.有EasyPoi.EasyExcel.包括Hutool当中封装的也是POI.唯一不同的是Hutool工具包不局限与做Excel.他里面封装了大量的util,一般现在开发都会用到糊涂. 本篇示例当中不仅仅有后端,而且还提供了前端html,html当中利用js将后端输出流直接下载为文件. 实现的效果如下:一点击导出文件直接下载
jquery+ajaxform+springboot控件实现数据更新功能

应用背景使用springboot架构在如下图所示的界面布局中,实现数据的保存或者更新,务必需要提交到后台,如何进行成功或失败的提示呢?如果使用传统的springmvc的模式,势必要传一个页面给前端,这个页面仅仅是提示操作是否成功了!提示之后还得更新一下数据,就好比我们浏览某些网站的时候给出的一些提示操作成功,5秒后返回 . 比较傻,客户体验也比较差劲. 改造历程使用ajax能否解决上述的问题呢? 答案是肯定的,点击保存之后,一个ajax请求到后台,使用ResponseBody标签,限制返回
SpringBoot解决ajax跨域问题的方法

SpringBoot解决ajax跨域,供大家参考,具体内容如下一.第一种方式 1.编写一个支持跨域请求的 Configuration import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.anno

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

目录

前言

什么是局部刷新？

优势和弊端？

实现流程

案列

相关推荐

随机推荐