小杰笔记篇：

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分别实现数据传输的更多相关文章

  1. Ajax结合THymeleaf使用

    <script type="text/javascript"> //通过$("标签"),也可以使用id的点击事件 $("a"). ...

  2. Jquery Ajax Json ashx 实现前后台数据传输

    经过一个多星期的研究,各种查找资料终于自己实现了Jquery  Ajax Json ashx 的前后台数据交流功能 首先一点,Ajax只能对应一个ashx文件,多余两个,如果打开异步传输的async: ...

  3. 【第十八章】 springboot + thymeleaf

    代码结构: 1.ThymeleafController package com.xxx.firstboot.web; import org.springframework.stereotype.Con ...

  4. 第十八章 springboot + thymeleaf

    代码结构: 1.ThymeleafController package com.xxx.firstboot.web; import org.springframework.stereotype.Con ...

  5. Ajax之处理不同格式的JSON数据

    JSON是一种网络中的数据格式,主要用于网络间的数据传输,它比XML格式的数据传输速度快,使用更广. 1.Ajax处理对象格式的JSON数据: <script src="../JS/j ...

  6. php综合应用

    php面试题之五--PHP综合应用(高级部分) 五.PHP综合应用 1.写出下列服务的用途和默认端口(新浪网技术部) ftp.ssh.http.telnet.https ftp:File Transf ...

  7. php面试题之五——PHP综合应用（高级部分）

    五.PHP综合应用 1.写出下列服务的用途和默认端口(新浪网技术部) ftp.ssh.http.telnet.https ftp:File Transfer Protocol,文件传输协议,是应用层的 ...

  8. php综合运用技术

    五.PHP综合应用 1.写出下列服务的用途和默认端口(新浪网技术部) ftp.ssh.http.telnet.https ftp:File Transfer Protocol,文件传输协议,是应用层的 ...

  9. 2017最新PHP初级经典面试题目汇总（下篇）

    17.isset.empty.is_null的区别 isset 判断变量是否定义或者是否为空 变量存在返回ture,否则返回false 变量定义不赋值返回false unset一个变量,返回false ...

  10. PHP面试题超强总结（PHP中文网）

    PHP面试基础题目 1.双引号和单引号的区别 双引号解释变量,单引号不解释变量 双引号里插入单引号,其中单引号里如果有变量的话,变量解释 双引号的变量名后面必须要有一个非数字.字母.下划线的特殊字符, ...

随机推荐

  1. oracle优化-分页查询的错误认识

    对于分页查询,上一篇文章总结了实现分页查询的办法.同时给出等价写法,另外在执行计划角度验证SQL的等价性https://www.cnblogs.com/handhead/p/13856505.html ...

  2. 前端三件套系例之JQuery——JQuery基础、JQuery选择器、JQuery文本属性样式操作、JQuery操作DOM

    文章目录 1 JQuery基础 1. 了解jQuery 1.1 什么是jQuery 1.2 什么事JS类库 1.3 常见JS类库 1.4 jQuery的优势 1.5 jQuery的版本 1.6 jQu ...

  3. C#学习笔记--进阶

    C#进阶 简单数据结构类 ArrayList 元素类型以Object类型存储,支持增删查改的数组容器. 因而存在装箱拆箱操作,谨慎使用. //ArrayList ArrayList array=new ...

  4. Vue:watch的多种使用方法

    好家伙, 补了一下watch的多种用法 1.属性: 方法(最常用) 使用最广泛的方式是将watch选项设置为一个对象,对象的属性是要观测的数据属性,值是一个回调函数,该回调函数会在属性变化时触发.例如 ...

  5. LooklessControl

    Lookless controls vs User Controls. Lookless controls usage patterns(LooklessControl与UserControl的比较. ...

  6. OpenGL 纹理详解

    1. 纹理 在OpenGL中,纹理是一种常用的技术,用于将图像或图案映射到3D模型的表面上,以增加图形的细节和真实感 2. 纹理坐标 纹理坐标在x和y轴上,范围为0到1之间(注意我们使用的是2D纹理图 ...

  7. CDQZ DS 题单总结（上）

    Preview: 个人认为是一套非常好的题单,能在各个方面练习 DS 水平,并且很多题型也是比赛当中的经典题 题单链接 Challenge 0: 简单的数组,懒得写了. Challenge 1: 考虑 ...

  8. uni-app学习笔记——路由与页面跳转

    小颖最近在学习小程序,怕自己前看后忘,毕竟还没开始进入项目实践中,就自己瞎倒腾嘻嘻,今天来看下  uni-app  的路由与页面跳转,小颖就简单列举下它们的用法,具体的大家可以看官网哦!啦啦啦啦啦  ...

  9. 【驱动】串口驱动分析(二)-tty core

    前言 tty这个名称源于电传打字节的简称,在linux表示各种终端,终端通常都跟硬件相对应.比如对应于输入设备键盘鼠标,输出设备显示器的控制终端和串口终端.也有对应于不存在设备的pty驱动.在如此众多 ...

  10. 安全测试工具Burpsuit和OWASP ZAP使用入门指南

    Burpsuit使用入门指南 安装: 网上有很多相关相关保姆级别教程,所以这里不加赘述了 尽量使用java8版本,破解版兼容8做的比较好 如果发现注册机无法打开或者能打开注册机[run]无法点击唤起软 ...