thymeleaf 异步刷新局部块_SpringBoot | Thymeleaf | 局部更新(示例代码)

建立一个实体类：

public class Fruit {

int id;

String name;

public Fruit() {

}

public Fruit(int id, String name) {

this.id = id;

this.name = name;

}

//省略get和set方法

}

建立一个控制类：

package org.project.controller;

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;

@Controller

public class FruitController {

@RequestMapping("/fruit")

public String fruit(Model model){

return "fruit";

}

@RequestMapping("/fruit/detail")

public String detail(Model model,int id) {

List fruits = new ArrayList<>();

if(id == 0) {

String[] strings={"香蕉","苹果","凤梨","西瓜"};

for(int i = 1; i <= strings.length; i++) {

fruits.add(new Fruit(i,strings[i-1]));

}

} else if(id == 1) {

String[] strings={"菠萝","草莓","西红柿","黑莓","百香果","葡萄"};

for(int i = 1; i <= strings.length; i++) {

fruits.add(new Fruit(i,strings[i-1]));

}

}

model.addAttribute("fruits",fruits);

return "fruit::fruit-list";

}

}

前端代码：

Thyleaf

function ceshi1() {

$(‘#fruit-list‘).load("/fruit/detail?id=0");

}

function ceshi2() {

$(‘#fruit-list‘).load("/fruit/detail?id=1");

}

测试1

测试2

ID水果名

效果：