小杰笔记篇：

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. dp_ppi转光纤模块连接200PLC组态王通信案例

    DP_PPI转光纤模块连接200PLC组态王光纤通信在冷却塔控制系统案例 现场背景介绍: 西门子200 CPU226PLC通过兴达易控dp转光纤模块在200PLC系统中ppi转光纤实现PCL与组态王2 ...

  2. 推荐免费的svn空间(SVN代码托管)

    推荐免费的svn空间(SVN代码托管) 最近研究了国内和国外的免费svn空间,SVN代码托管,SVN在线,代码托管中心,有所心得. 1.http://www.svn999.com/ [推荐]国内的,免 ...

  3. Go字符串实战操作大全！

    在本篇文章中,我们深入探讨了Go语言中字符串的魅力和深度.从基础定义.操作.字符编码到复杂的类型转换,每个环节都带有实例和代码示例来深化理解.通过这些深入的解析,读者不仅能够掌握字符串在Go中的核心概 ...

  4. vue打包部署遇到的问题

    网站上线中遇到的问题(跨域,404,空白页解决方案) 因为本人是后端开发工程师,对前端开发不了解,踩了很多坑,所以将踩过的坑分享出来,以供参考 网站地址:这里 这段时间将项目部署到服务器中引发了几个问 ...

  5. Go语言基准测试(benchmark)三部曲之一：基础篇

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 关于基准测试(benchmark) Go的标准库内置的 ...

  6. QT编程过程中遇到的问题

    QT编程过程中遇到的问题 (一)QT卡死 (二)mingw转msvc编码问题 (三)内存泄漏问题 1. vld检查内存泄漏问题 2. QTextEdit造成内存泄漏 (end)后面会更新 (一)QT卡 ...

  7. .Net Core 3.1升级 .Net 5后出现代码错误 rzc generate exited with code 1.

    安装.Net 5后出现错误,错误定位到了CodeGeneration相关的文件,找了半天也不知道哪里的问题. 升级类库,清理解决方案,删除obj.bin文件夹什么的卵用没有. 最后发现升级.Net 5 ...

  8. source insight 中添加指定类型文件

    以下为source insight 3.X版本的设置方法: source insight 中过滤某些格式的文件. 建立source insight工程后,先暂时不要急于添加文件. 打开options- ...

  9. Java核心知识体系6：集合框架详解

    Java核心知识体系1:泛型机制详解 Java核心知识体系2:注解机制详解 Java核心知识体系3:异常机制详解 Java核心知识体系4:AOP原理和切面应用 Java核心知识体系5:反射机制详解 1 ...

  10. 记一次 .NET 某券商论坛系统 卡死分析

    一:背景 1. 讲故事 前几个月有位朋友找到我,说他们的的web程序没有响应了,而且监控发现线程数特别高,内存也特别大,让我帮忙看一下怎么回事,现在回过头来几经波折,回味价值太浓了. 二:程序到底经历 ...