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.双引号和单引号的区别 双引号解释变量,单引号不解释变量 双引号里插入单引号,其中单引号里如果有变量的话,变量解释 双引号的变量名后面必须要有一个非数字.字母.下划线的特殊字符, ...
随机推荐
- 记一次Redis Cluster Pipeline导致的死锁问题
作者:vivo 互联网服务器团队- Li Gang 本文介绍了一次排查Dubbo线程池耗尽问题的过程.通过查看Dubbo线程状态.分析Jedis连接池获取连接的源码.排查死锁条件等方面,最终确认是因为 ...
- 基本操作：vscode快捷键
1.复制,剪切 补选中具体内容的话,光标放在这一行的任何位置,输入Ctrl+C,就表示已经复制这一行了:直接Ctrl+V可以粘贴: 截切也一样:光标放在这一行的任何位置,输入Ctrl+X,就表示已 ...
- java实现朴素rpc
五层协议中,RPC在第几层? 五层协议 应用层 传输层 网络层 链路层 物理层 我不知道,我要去大气层! 远程过程调用(RPC),比较朴素的说法就是,从某台机器调用另一台机器的一段代码,并获取返回结果 ...
- 虹科分享｜虹科Redis企业版数据库带你跑赢MySQL数字时代！
数字革命悄然爆发,数据库也将成为率先破局的关键技术! 借着互联网爆发的东风,前几年MySQL以其过硬的产品能力及开源优势,一度成为全球最受欢迎的关系型数据库.然而,革命的漫长之路才刚开始,MySQL是 ...
- 9.12 多校联测 Day2 总结
还是有不少不该挂的分. 开考看了 T1 约 40min 仍然毫无思路,试着推 mod=2 无果.吸取昨天经验教训,赶紧扔掉看 T2. 在 9:00 想到了 dp 的可能性,苦于设计不出状态.9:20 ...
- Python 继承和子类示例：从 Person 到 Student 的演示
继承允许我们定义一个类,该类继承另一个类的所有方法和属性.父类是被继承的类,也叫做基类.子类是从另一个类继承的类,也叫做派生类. 创建一个父类 任何类都可以成为父类,因此语法与创建任何其他类相同: 示 ...
- java_3.运算符、if条件结构
运算符.if条件结构 关系运算符 == != < > >= <= 1.关系运算符运算的结果是boolean类型 2.可以使用boolean类型的变量接收关系运算的结果 publ ...
- deepin解决文件管理器打不开和桌面黑屏的问题
总结 deepin 的优点是上手非常容易, 但截止当前(2021-6-24)的使用来说稳定性还不是非常好. 今天就遇到了无法显示桌面的问题,可以参照如下解决办法.只需使用红色框中的命令即可. 图片转载 ...
- 3.1 IDA Pro编写IDC脚本入门
IDA Pro内置的IDC脚本语言是一种灵活的.C语言风格的脚本语言,旨在帮助逆向工程师更轻松地进行反汇编和静态分析.IDC脚本语言支持变量.表达式.循环.分支.函数等C语言中的常见语法结构,并且还提 ...
- GPTs Hunter 是什么？
原文: https://openaigptguide.com/openai-gpts-hunter/ GPTs Hunter 是一个功能强大的免费导航网站,支持多语言,提供用户友好的界面. GPTs ...