ajax与thymeleaf分别实现数据传输
小杰笔记篇：
1:第一种：利用Model和thymeleaf引擎来完成：
Controller层：
@CrossOrigin//解决跨域问题
@Controller
public class UserController {
@Autowired
private UserMapper userMapper;
@RequestMapping({"/","/index"})
public String queryUserList(Model model){
List<User> users = userMapper.queryList();
model.addAttribute("msg",users);
return "index";
}
html：引入引擎
<!DOCTYPE html>
<html lang="en"xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--/*@thymesVar id="msg" type=""*/-->
<p th:text="${msg}"></p>
</body>
</html>
第二种方式：ajax：
第一步：创建User实体类假装数据库里面的数据：
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private Integer id;
private String name;
private Integer tid;
}
第二步：Controller层：
@ResponseBody
@RequestMapping("/jie")
public List<User> ajax2(){
List<User> list=new ArrayList<>();
list.add(new User(1,"杰",5));
list.add(new User(2,"杰",6));
list.add(new User(3,"杰",7));
list.add(new User(4,"杰",8));
return list;
}
第三步：编写html：Jquery我这边下载文件导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.0.js"></script>
</head>
<body>
<input type="button" id="btn" value="获取数据">
<table width="80%" align="center">
<tr>
<td>id</td>
<td>姓名</td>
<td>编号</td>
</tr>
</table>
<table id="con">
</table>
</body>
</html>
JavaScript：
<script>
$(function () {
$("#btn").click(function () {
$.post({
url:"http://localhost:8080/jie",
success: function (data) {
console.log(data)
var html="";
for (var i = 0; i <data.length ; i++) {
html+= "<tr>" +
"<td>" + data[i].id + "</td>" +
"<td>" + data[i].name + "</td>" +
"<td>" + data[i].tid + "</td>" +
"</tr>"
}
$("#con").html(html);
}
})
})})
</script>
结果：
小杰笔记记录一下
ajax与thymeleaf分别实现数据传输的更多相关文章
- Ajax结合THymeleaf使用
<script type="text/javascript"> //通过$("标签"),也可以使用id的点击事件 $("a"). ...
- Jquery Ajax Json ashx 实现前后台数据传输
经过一个多星期的研究,各种查找资料终于自己实现了Jquery Ajax Json ashx 的前后台数据交流功能 首先一点,Ajax只能对应一个ashx文件,多余两个,如果打开异步传输的async: ...
- 【第十八章】 springboot + thymeleaf
代码结构: 1.ThymeleafController package com.xxx.firstboot.web; import org.springframework.stereotype.Con ...
- 第十八章 springboot + thymeleaf
代码结构: 1.ThymeleafController package com.xxx.firstboot.web; import org.springframework.stereotype.Con ...
- Ajax之处理不同格式的JSON数据
JSON是一种网络中的数据格式,主要用于网络间的数据传输,它比XML格式的数据传输速度快,使用更广. 1.Ajax处理对象格式的JSON数据: <script src="../JS/j ...
- php综合应用
php面试题之五--PHP综合应用(高级部分) 五.PHP综合应用 1.写出下列服务的用途和默认端口(新浪网技术部) ftp.ssh.http.telnet.https ftp:File Transf ...
- php面试题之五——PHP综合应用（高级部分）
五.PHP综合应用 1.写出下列服务的用途和默认端口(新浪网技术部) ftp.ssh.http.telnet.https ftp:File Transfer Protocol,文件传输协议,是应用层的 ...
- php综合运用技术
五.PHP综合应用 1.写出下列服务的用途和默认端口(新浪网技术部) ftp.ssh.http.telnet.https ftp:File Transfer Protocol,文件传输协议,是应用层的 ...
- 2017最新PHP初级经典面试题目汇总（下篇）
17.isset.empty.is_null的区别 isset 判断变量是否定义或者是否为空 变量存在返回ture,否则返回false 变量定义不赋值返回false unset一个变量,返回false ...
- PHP面试题超强总结（PHP中文网）
PHP面试基础题目 1.双引号和单引号的区别 双引号解释变量,单引号不解释变量 双引号里插入单引号,其中单引号里如果有变量的话,变量解释 双引号的变量名后面必须要有一个非数字.字母.下划线的特殊字符, ...
随机推荐
- Modbus动态链接库供多语言使用 | Go
Modbus协议控制动态链接库 应用场景 基于各门语言都有各自的modbus协议库,且良莠不齐,而且在具体的框架下可能存在版本依赖问题, 而且对modbus协议存在比较多的细节处理,可以查看modbu ...
- ⭐volatile⭐ 用volatile关键字则会从内存中直接读取变量的值
- About Info-ZIP
LATEST RELEASES: Zip 3.00 was released on 7 July 2008. WiZ 5.03 was released on 11 March 2005. UnZip ...
- Windows11如何设置经典的右键菜单
使用Windows11几个月了,解决了我的电脑经常性彻底死机.蓝屏的问题,系统也流畅.易用了好多.唯一不能忍受的是右键菜单,经常需要再点一次才能找到自己想要的选项,今天网搜了下解决办法,特记录于此. ...
- 轻松掌握组件启动之Redis集群扩展秘籍：轻松扩容与缩容，释放高性能潜能
扩展集群操作 扩容 在我们原始的集群基础上,我们决定增加一台主节点(8007)和一台从节点(8008),这样新增的节点将会在下图中以虚线框的形式显示在集群中. 1: 首先,在 /usr/local/r ...
- 关于Halcon中variation_model模型的快速解读。
十一期间在家用期间研读了下Halcon的variation_model模型,基本上全系复现了他的所有技术要求和细节,这里做个记录. 其实这个模型的所有原理都不是很复杂的,而且Halcon中的帮助文档也 ...
- 17.1 隐藏执行CMD命令
本章内容涉及使用Socket API和CMD命令行工具实现本地CMD命令执行.无管道正向CMD和无管道反向CMD三种功能.执行本地CMD实现使用CreateProcess函数创建一个新的CMD进程,并 ...
- z函数|exkmp|拓展kmp 笔记+图解
题外话,我找个什么时间把kmp也加一下图解 z函数|exkmp 别担心 这个exkmp和kmp没毛点关系,请放心食用. 本文下标以1开始,为什么?因为1开始就不需要进行长度和下标的转换,长度即下标. ...
- [Python急救站]密码判断
用Python做一个密码判断,用户输入注册密码,需要6位以上,包含数字.大写字母.小写字母. import re a = re.compile('[a-z]') b = re.compile('[A- ...
- 记录jdk17相对于jdk8增加的一下主要语法糖和新特性
jdk17 发布已经好久了,作为java的长期支持版本,引入了许多有趣且实用的新特性.这些特性不仅提高了开发效率,还增强了语言的表现力和安全性.并且是SpringBoot 3.0以后版本的硬性要求,之 ...