Ajax前后端对接---Springmvc

Springmvc实现

实体类user

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {private String name;private int age;private String sex;}

我们来获取一个集合对象，展示到前端页面

@RequestMapping("/a2")
public List<User> ajax2(){List<User> list = new ArrayList<User>();list.add(new User("秦疆1号",3,"男"));list.add(new User("秦疆2号",3,"男"));list.add(new User("秦疆3号",3,"男"));return list; //由于@RestController注解，将list转成json格式返回
}

前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title>
</head>
<body>
<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center"><tr><td>姓名</td><td>年龄</td><td>性别</td></tr><tbody id="content"></tbody>
</table><script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
<script>$(function () {$("#btn").click(function () {$.post("${pageContext.request.contextPath}/a2",function (data) {console.log(data)var html="";for (var i = 0; i <data.length ; i++) {html+= "<tr>" +"<td>" + data[i].name + "</td>" +"<td>" + data[i].age + "</td>" +"<td>" + data[i].sex + "</td>" +"</tr>"}$("#content").html(html);});})})
</script>
</body>
</html>

成功实现了数据回显！可以体会一下Ajax的好处！

Ajax前后端对接---Springmvc相关推荐

前后端对接的思考及总结
说在前面的话随着前端NodeJs技术的火爆,现在的前端已经非以前传统意义上的前端了,各种前端框架(Vue.React.Angular......)井喷式发展,配合NodeJs服务端渲染引擎,目前前端 ...
前后端开发的心得体会_前后端对接的思考及总结
说在前面的话随着前端NodeJs技术的火爆,现在的前端已经非以前传统意义上的前端了,各种前端框架(Vue.React.Angular......)井喷式发展,配合NodeJs服务端渲染引擎,目前前端 ...
Vue前后端对接时判断是否与后端连接成功
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/Happyaileaf/article/ ...
MdEditor-v3中上传照片的前后端对接（图片上传至又拍云云储存）
MdEditor-v3中上传照片的前后端对接(图片上传至又拍云云储存) 使用springboot+MdEditor-v3+又拍云实现markdown的图片上传功能需要有一定的springboot和v ...
SpringBoot+Vue+Mybatis-plus 博客（七）：完成友链管理前后端对接
SpringBoot+Vue+Mybatis-plus 博客:个人博客介绍及效果展示 SpringBoot+Vue+Mybatis-plus 博客(一):完成博客后台前端登录页面.后端登录接口 Spr ...
Ajax前后端交互利器详解(一)
✍Ajax前后端交互利器
前后端对接及接口管理平台浅析
关与作者更多博客请访问云里云外开源社区文章目录一.接口是什么(附带简易案例) 二.Tomcat的Servlet 三.json 四.接口文档: 五.管理平台每一个完整的项目都是不是一个人的功劳,是 ...
ajax前后端通信的头部消息之请求头与响应头
前后端在通信时,互相发送的消息包括头部消息和主体数据,而头部消息分为请求头和响应头两种. 请求头是前端发送,服务端获取. 响应头是服务端发送,前端获取. 设置请求头的规则: 请求头设置必须在open方 ...
[JavaScript][AJAX] 前后端交互流程,ajax工作流程
目录前后端交互流程 1.了解服务器 : 提供服务器的机器(计算机) 2.前端访问服务器的几种方式 3.ajax技术 : 页面不跳转的情况下,向服务器请求数据 4.前后端交互三个流程 ajax工作流 ...

Ajax前后端对接---Springmvc

Springmvc实现

Ajax前后端对接---Springmvc相关推荐

最新文章

热门文章