SpringBoot | Thymeleaf | 局部更新
2024-08-23 11:02:54
建立一个实体类:
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<Fruit> 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";
}
}
前端代码:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thyleaf</title>
<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
<script>
function ceshi1() {
$('#fruit-list').load("/fruit/detail?id=0");
}
function ceshi2() {
$('#fruit-list').load("/fruit/detail?id=1");
}
</script>
</head>
<body>
<button onclick="ceshi1()">测试1</button>
<button onclick="ceshi2()">测试2</button> <div id="fruit-list" style="text-align: center;margin:0 auto;width: 900px" th:fragment="fruit-list">
<table width="100%" border="1" cellspacing="1" cellpadding="0">
<thead>
<th>ID</th>
<th>水果名</th>
</thead>
<tbody>
<tr th:each="fruit : ${fruits}">
<td th:text="${fruit.id}"></td>
<td th:text="${fruit.name}"></td>
</tr>
</tbody>
</table>
</div> </body>
</html>
效果:
最新文章
- Unity UGUI知识点
- hdu 4481 Time travel(高斯求期望)(转)
- [bzoj1901][zoj2112][Dynamic Rankings] (整体二分+树状数组 or 动态开点线段树 or 主席树)
- HDU 1098 Ignatius&#39;s puzzle 费马小定理+扩展欧几里德算法
- 关于MapReduce单词统计的例子:
- iOS开发——面试笔试精华(三)
- DataGridView几个基本属性
- JAVA多态需要注意的一些问题
- IOS成长之路-Nsstring中搜索方法rangeOfString
- Jquery 图片轮播实现原理总结
- Scala actor的使用
- 进击Node.js基础(一)
- 阿里如何实现海量数据实时分析技术-AnalyticDB
- TaxonKit - A cross-platform and Efficient NCBI Taxonomy Toolkit
- 20145203盖泽双 《网络对抗技术》实践八:Web基础
- 树和二叉树->;相互转化
- e2e 测试 出现的错误
- canvas 实现时钟效果
- linux sqlplus查询数据中文乱码解决方法记录
- 【亲测有效】Nodepad++/Sublime Text3中Python脚本运行出现语法错误:IndentationError: unindent does not match any outer indentation level解决策略
热门文章
- html5--3.22 综合实例03
- bind (ERROR 502): bind(0.0.0.0:9501) failed. Error: Address already in use [98] (端口被占用)
- 【UVA12779占位】Largest Circle
- Python 黑帽子第二章运行截图
- java-swing-JTextComponent
- python3 分布式进程(跨机器)BaseManager(multiprocessing.managers)
- ubuntu bcompare 安装
- .NETFramework:Timers
- web缓存概述
- Monkey学习(转载)