小杰笔记篇：

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. 文心一言 VS 讯飞星火 VS chatgpt （102）-- 算法导论9.3 8题

    八.用go语言,设 X[1..n]和 Y[1..n]为两个数组,每个都包含n个有序的元素.请设计一个 O(lgn)时间的算法来找出数组 X和Y中所有 2n 个元素的中位数. 文心一言: 要在 O(lg ...

  2. Q-REG论文阅读

    Q-REG Jin, S., Barath, D., Pollefeys, M., & Armeni, I. (2023). Q-REG: End-to-End Trainable Point ...

  3. webwork学习

    学习了H5中的webworker 主机 > 程序 > 进程 > 线程 > 纤程 多进程(重) 多线程(轻) 开销 创建.销毁开销大 创建.销毁开销小 安全性 进程之间是隔离 线 ...

  4. mapState、mapGetters、mapMutations、mapActions学习

    https://next.vuex.vuejs.org/zh/guide/state.html#mapstate-%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0 https: ...

  5. 使用ClosedXml查询Excel文件数据，匹配时间并显示

    使用Nuget包管理器安装ClosedXml包,VS没网在https://www.nuget.org/ 下载后,包源本地安装至项目 函数: private void SelectGrab(Cancel ...

  6. 解决使用mitmprox抓包可以访问网页，但是使用python request 调用该网站接口报错问题

    可能有几种原因导致这种情况.以下是一些常见的问题和可能的解决方法: 证书验证问题: 当你使用mitmproxy抓包时,它通常会生成自签名的SSL证书,以便进行中间人攻击检查.但在Python中使用re ...

  7. Idea单窗口导入多个项目模块

    现在我们比较流行微服务,但是服务一旦多了,项目打开也是很麻烦的,运行内存16个G的电脑,基本上打开4,5个项目模块就顶不住了.那么,我们怎么把多个项目导入到一个idea窗口中呢? 实现效果 导入步骤 ...

  8. springboot整合jpa sqlite

    前言 最近有关项目需要用到SQLITE,我先是使用Mybatis去连接SQLITE,然后发现SQLITE对BLOB支持不好,在网上看到相关教程可以写mapper.xml文件,加一个handler解决B ...

  9. ubuntu20.04不定时卡死，鼠标和键盘都不可用，且tty无效

    事情的经过: 已经在ubuntu上安装了好多东西,配置了好多环境,最近突然莫名卡死.我遇到的问题是: 1.如果开机之后只是打开终端,打开编辑器之类的操作,系统不会卡死. 2.一旦打开firefox火狐 ...

  10. JAVA类的加载(1) ——类的加载及类加载器介绍

    过程:当程序主动使用某个类时,如果该类还未被加载到内存中,系统会通过加载.连接.初始化三个步骤来对该类进行初始化,有时候称为类加载(类初始化)   类加载 定义:类加载 指的是将类的class文件读入 ...