SpringBoot+thymeleaf+ajax實現(xiàn)局部刷新詳情

更新時間：2022年09月23日 11:42:48 作者：晚上睡不著_???????

這篇文章主要介紹了SpringBoot+thymeleaf+ajax實現(xiàn)局部刷新詳情，文章圍繞主題展開詳細的內容介紹具有一定的參考價值，需要的小伙伴可以參考一下

前言

什么是局部刷新？

簡而言之，就是當我發(fā)送一個請求到后端后拿到數(shù)據(jù)后返回當前頁面不會對整個頁面進行重載而只對當前請求的模塊進行刷新。

優(yōu)勢和弊端？

優(yōu)勢：

用戶體驗好，不需要對頁面進行重載
利于開發(fā)人員開發(fā)，提高開發(fā)效率
前后端完全分離

弊端：

不利于優(yōu)化！
第一次從服務器端獲取的內容不包含需要動態(tài)綁定的數(shù)據(jù)，所以頁面的源代碼中沒有這些內容，不利于收錄，后期通過js添加到頁面中的內容，并不會寫在頁面的源代碼中~
時間上的些許浪費，沒有服務器端渲染頁面呈現(xiàn)速度快！
交由客戶端渲染，首先需要把頁面呈現(xiàn)，然后再通過js的異步ajax請求獲取數(shù)據(jù)，然后數(shù)據(jù)綁定，瀏覽器再把動態(tài)增加的部分重新渲染，這樣就浪費了一些時間，沒有服務器端渲染頁面速度快?。?！

實現(xiàn)流程

通過前端一部請求到后端接口
通過模板語法返回頁面: : 刷新的標記
前端渲染頁面 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實現(xiàn)局部刷新測試接口類
 * @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實現(xiàn)局部刷新詳情的文章就介紹到這了,更多相關SpringBoot thymeleaf 內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

JavaWeb Session失效時間設置方法
這篇文章主要介紹了JavaWeb Session失效時間設置方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-12-12
Exception in thread main java.lang.NoClassDefFoundError錯誤解決方
這篇文章主要介紹了Exception in thread main java.lang.NoClassDefFoundError錯誤解決方法,需要的朋友可以參考下
2016-08-08
SpringBoot中的yaml語法及靜態(tài)資源訪問問題
這篇文章主要介紹了SpringBoot中的yaml語法及靜態(tài)資源訪問問題，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2021-07-07
springboot logback如何從apollo配置中心讀取變量
這篇文章主要介紹了springboot logback如何從apollo配置中心讀取變量的操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-08-08
java實現(xiàn)模擬RPG格斗
這篇文章主要介紹了java實現(xiàn)模擬RPG格斗，每個英雄具有以下幾個屬性：生命值（為0時英雄倒下）、攻擊力（每次攻擊時扣除對方的生命值點數(shù)）、攻擊間隔（每次攻擊過后都要等待間隔時間才能進行下次攻擊首次攻擊之前也要先等待間隔時間）簡單設置了下吧，小伙伴可以參考下
2015-03-03
java實現(xiàn)四子棋游戲
這篇文章主要為大家詳細介紹了java實現(xiàn)四子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-03-03
shiro編碼和加密代碼詳解
Shiro提供了base64和16進制字符串編碼/解碼的API支持，方便一些編碼解碼操作。下面通過實例代碼給大家詳解shiro編碼和加密知識，感興趣的朋友一起看看吧
2017-09-09
java中對象和JSON格式的轉換方法代碼
JSON格式可以輕松地以面向對象的方式轉換為Java對象,下面這篇文章主要給大家介紹了關于java中對象和JSON格式的轉換方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-12-12
Java代碼塊與代碼加載順序原理詳解
這篇文章主要介紹了Java代碼塊與代碼加載順序原理詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-01-01
Java中hutool?List集合對象拷貝案例代碼
這篇文章主要給大家介紹了關于Java中hutool?List集合對象拷貝的相關資料,介紹了如何將兩個不同對象（Point和CustomData）的特定字段拷貝到一個中間對象（IotDataCache）中,并討論了一些在實現(xiàn)過程中遇到的問題和解決方法,需要的朋友可以參考下
2024-11-11