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.双引号和单引号的区别 双引号解释变量,单引号不解释变量 双引号里插入单引号,其中单引号里如果有变量的话,变量解释 双引号的变量名后面必须要有一个非数字.字母.下划线的特殊字符, ...
随机推荐
- 解密IP分片与重组：数据传输中的关键技术
引言 在上一章节中,我们详细讨论了IP的分类和无分类原则的原理以及其在网络通信中的应用.IP分片与重组是在数据包传输过程中起到关键作用的机制.当数据包的大小超过网络链路的MTU(最大传输单元)限制时, ...
- 【短道速滑十】非局部均值滤波的指令集优化和加速（针对5*5的搜索特例，可达到单核1080P灰度图 28ms/帧的速度）。
非局部均值滤波(Non Local Means)作为三大最常提起来的去燥和滤波算法之一(双边滤波.非局部均值.BM3D),也是有着很多的论文作为研究和比较的对象,但是也是有着致命的缺点,速度慢,严重的 ...
- frida动态插桩初探
前言 近期碰到了分析app的需求,就学习了一下 frida的动态插桩技术.frida是一款轻量级HOOK框架,可用于多平台上,例如android.windows.ios等.frida分为两部分,服务端 ...
- 针对Jupter Kernel error的问题解决
首先打开Anaconda Prompt 输入jupyter kernelspec list查看安装的内核和位置 到显示的的目录下面找到 kernel.josn这个文件 修改为现在的python环境路径 ...
- NLP技术如何为搜索引擎赋能
在全球化时代,搜索引擎不仅需要为用户提供准确的信息,还需理解多种语言和方言.本文详细探讨了搜索引擎如何通过NLP技术处理多语言和方言,确保为不同地区和文化的用户提供高质量的搜索结果,同时提供了基于Py ...
- 使用Jenkins构建镜像：将应用打包成镜像
学习某册子的CICD,记录使用Jenkins构建镜像的过程. 使用Jenkins集成Git来构建Docker镜像,为后面的部署准备镜像资源. 1. 安装Nodejs环境 如果想要安装Node环境,有以 ...
- 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
本文所有内容,纯属个人观点,无意与任何人争论 前端技术的现状 我觉得前端技术发展到现在有两个最主要的特征 前端工具链为前端工程化提供了强有力的支持 这方面主要是webpack.rollup.esbui ...
- STL deque容器
deque - 双向队列 1.队列的基本知识 队列的基本特性就是先进先出(FIFO),也就是第一个进去的元素第一个出来.即队列就是一个只允许在一端进行插入,在另一端进行删除操作的线性表.Queue接口 ...
- C/C++ 运用Npcap发送UDP数据包
Npcap 是一个功能强大的开源网络抓包库,它是 WinPcap 的一个分支,并提供了一些增强和改进.特别适用于在 Windows 环境下进行网络流量捕获和分析.除了支持通常的网络抓包功能外,Npca ...
- LangChain内幕指南
1.概述 在人工智能迅速演进的时代,诸如Open AI的ChatGPT和Google的Bard等大型语言模型(LLMs)正彻底改变我们与技术互动的方式.这些技术巨头和SaaS公司正在竞相利用LLMs的 ...