springmvc+json 前后台数据交互
1. 配置
(1) 文件配置参考这里
(2) 导入jackson相关包：jackson-annotations-2.9.4.jar，jackson-core-2.9.4.jar，jackson-databind-2.9.4.jar
(3) 在WebContent目录下创建js文件夹，加入jquery和json2的js文件
js文件及jackson的jar文件可以在这里下载
2. 项目结构
一、接收json格式的数据
1. book.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试接收JSON格式的数据</title>
<script type="text/javascript" src="${ctx }/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="${ctx }/js/json2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
testRequestBody();
}); function testRequestBody() {
$.ajax("${ctx}/json/testRequestBody",// 发送请求的URL字符串。
{
dataType : "json", // 预期服务器返回的数据类型。
type : "post", // 请求方式 POST或GET
contentType : "application/json", // 发送信息至服务器时的内容编码类型
// 发送到服务器的数据。
data : JSON.stringify({
bookId : 1,
bookName : "Spring MVC"
}),
async : true, // 默认设置下，所有请求均为异步请求。如果设置为false，则发送同步请求
// 请求成功后的回调函数。请求完成后使用function(data)函数，把结果显示到页面上来
success : function(data) {
console.log(data);
$("#id").html(data.bookId);
$("#name").html(data.bookName);
$("#author").html(data.bookAuthor);
},
// 请求出错时调用的函数
error : function() {
alert("数据发送失败");
}
});
}
</script>
</head>
<body>
编号：<span id="id"></span><br>
书名：<span id="name"></span><br>
作者：<span id="author"></span><br>
</body>
</html>
在jsp页面中：
(1) 页面使用jQuery发送json数据
(2) 页面载入时调用testRequestBody函数
(3) testRequestBody函数发送异步请求到"json/testRequestBody"，请求成功将返回一个json数据，接到返回的数据后，将数据设置到页面的<span>中
2. BookController.java
@Controller
@RequestMapping("/json")
public class BookController { private static final Log logger = LogFactory.getLog(BookController.class); //@RequestBody根据json数据，转换成对应的Object
@RequestMapping(value="/testRequestBody")
public void setJson(@RequestBody Book book,
HttpServletResponse response) throws Exception{
// ObjectMapper类是Jackson库的主要类。它提供一些功能将Java对象转换成对应的JSON格式的数据
ObjectMapper mapper = new ObjectMapper();
// 将book对象转换成json输出
logger.info(mapper.writeValueAsString(book) );
book.setBookAuthor("文");
response.setContentType("text/html;charset=UTF-8");
// 将book对象转换成json写出到客户端
response.getWriter().println(mapper.writeValueAsString(book));
}
@RequestBody Book book表示：使用@RequestBody注解获取到的json数据，将json数据设置到对应的Book对象的属性中，HttpServletResponse response用来输出响应数据到客户端。
前台jsp页面的json数据传入bookId和bookName，为了测试接收数据，使用logger.info(mapper.writeValueAsString(book) )，代码将接收到的json数据的book对象打印在控制台上。
3. Book.java
public class Book implements Serializable{
private Integer bookId;
private String bookName;
private String bookAuthor;
public Book(){
super();
}
public Book(Integer id, String name, String author) {
super();
this.bookId = id;
this.bookName = name;
this.bookAuthor = author;
}
//setter and getter
}
在浏览器中输入http://localhost:8080/ProgramName/book.jsp
在载入index.jsp页面时，会发送ajax请求，传递json数据，BookController接收到请求后，@RequestBody注解会将json数据设置到Book参数的对应属性中
然后setJson方法给Book对象的author属性赋值，并把Book对象转换成json输出到客户端。结果如下：
控制台输出如下信息：
INFO [http-bio-8080-exec-17] - {"bookId":1,"bookName":"Spring MVC","bookAuthor":null}
二、返回json格式的数据
1. BookController.java
@RequestMapping(value="/testRequestBody2")
//ResponseBody会将集合数据转换为json格式，并将其返回客户端
@ResponseBody
public Object getJson(){
List<Book> list = new ArrayList<Book>();
list.add(new Book(1,"Spring MVC","文"));
list.add(new Book(2,"JavaEE","李"));
return list;
}
getJson方法将List集合数据转换成json格式，然后将其返回到客户端。
1. book2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试返回JSON格式的数据</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
testResponseBody();
});
function testResponseBody(){
$.post("${pageContext.request.contextPath}/json/testRequestBody2",null,
function(data){
$.each(data,function(){
var tr = $("<tr align='center'/>");
$("<td/>").html(this.bookId).appendTo(tr);
$("<td/>").html(this.bookName).appendTo(tr);
$("<td/>").html(this.bookAuthor).appendTo(tr);
$("#booktable").append(tr);
})
},"json");
}
</script>
</head>
<body>
<table id="booktable" border="1" style="border-collapse: collapse;">
<tr align="center">
<th>编号</th>
<th>书名</th>
<th>作者</th>
</tr>
</table>
</body>
</html>
在浏览器中输入http://localhost:8080/ProgramName/book.jsp
载入book2.jsp页面时会发送ajax请求，getJson方法创建多个Book对象并将其封装到List集合中返回，方法上的@RequestBody注解会将集合数据转换为json格式数据并将其返回客户端。结果如下：
参考：《Spring+MyBatis企业应用实战》
springmvc+json 前后台数据交互的更多相关文章
- 测开之路一百五十四：ajax+json前后台数据交互
在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...
- Phonegap开发的前后台数据交互
在用Phonegap开发时,需要进行前后台数据交互,在网上找资料,很多东西让人一头雾水,最后借鉴了下面的博客: http://blog.sina.com.cn/s/blog_681929ae01017 ...
- Spring MVC 前后台数据交互
本文是转载文章,感觉比较好,如有侵权,请联系本人,我将及时删除. 原文网址地址:<Spring MVC 前后台数据交互> 1.服务端数据到客户端 (1)返回页面,Controller中方法 ...
- Django学习笔记（8）——前后台数据交互实战（AJAX）
这里将自己这段时间学习的关于前后台数据交互的笔记写在这里,这里包含了Django传输数据给JS,AJAX的相关问题,跨域问题,如何解决AJAX的跨域问题等等.比较凌乱,请看到这篇博客的盆友见谅,如果我 ...
- HTML和JSON的数据交互-jsonp跨域
HTML和json的数据交互 <!DOCTYPE html> <html> <head> <script src="//ajax.googleapi ...
- HTML和JSON的数据交互-HTML模板
直接上源码,原文http://www.zhangxinxu.com/wordpress/2012/09/javascript-html-json-template/ <!DOCTYPE html ...
- 用PHP和Ajax进行前后台数据交互——以用户登录为例
很多网站中都有用户登录系统,要完成用户的注册和登陆,就一定要用到前后台的数据交互.在这里以简单的用户注册和登陆为例介绍一下前后台交互的大致流程. 首先,我们来做一个简单的登陆界面. 这里为了方便我使用 ...
- vue仓库、组件间通信、前后台数据交互、前端储存数据大汇总
目录 路由重定向 仓库介绍 vuex插件:可以完成任意组件间信息交互(移动端) 前端存储数据大汇总 前后台交互方式(重点) 前后台数据交互 axios插件:完成前后台ajax交互的 同源策略 - 前后 ...
- 玩转Web之Json（二）----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
最近在学Json,在网上也找过一些资料,觉得有点乱,在这里,我以easy ui的登录界面为例来说一下怎样用Json实现前后台的数据交互 使用Json,首先需要导入一些jar包,这些资源可以在网上下载到 ...
随机推荐
- python爬取快手ios端首页热门视频
最近快手这种小视频app,特别的火,中午吃过午饭,闲来无聊,想搞下快手的短视频,看能不能搞到. 于是乎, 打开了fiddler,开始准备抓包, 设置代理,重启,下一步,查看本机ip 手机打开网络设置 ...
- Android启动问题——黑屏、死机等解决方法
今天用了下Android Studio,出现了一些问题,现在将启动过程中遇到的问题和解决方案列出来,方便大家参考. 安装过程不多说,网上一搜一大把. 那直接说问题吧: 1. 无法启动,报错:Faile ...
- File System Object（FSO对象）A
FSO对象模型包含在Scripting 类型库 (Scrrun.Dll)中,它同时包含了Drive.Folder.File.FileSystemObject和TextStream五个对象: 1.Dri ...
- UART、SPI、I2C协议异同点
I2C.SPI.UART都是常见的低速板级通信协议,目前主流的SoC都内置了这些通讯协议的控制器,同样,各种传感器.Touch控制器.指纹模块.蓝牙模块.WIFI模块也都兼容这三种通信方式的一种或几种 ...
- 【Apache】 ab进行压力测试
前言: ab是apache自带的压力测试工具,当安装完apache的时候,就可以在bin下面找到ab然后进行apache 负载压力测试. 工具: Apache ab压测工具 一.安装 (1) 下载 : ...
- 如何在多机架（rack）配置环境中部署cassandra节点
cassandra节点上数据的分布和存储是由系统自动完成的.除了我们要设计好partition key之外,在多机架(rack)配置环境中部署cassandra节点,也需要考虑cassandra分布数 ...
- JetBrains激活 PyCharm | IntelliJ IDEA | CLion | WebStorm...
最近,JetBrains的IDE火了起来,身为学Java的人,放弃了Eclipse,选择了Idea,还真有点不舍得呢... 虽然Idea不错(在我看来,比Eclipse好用),但是,人家是收费的呀.. ...
- day13 内置函数
参考资料: https://www.processon.com/view/link/5b4ee15be4b0edb750de96ac 内置函数: 作⽤域相关: locals() 返回当前作用域 ...
- 2019第十届蓝桥杯C++B组题解（赛后重写的，不确保答案正确性，仅供参考）
先说一下这次的感受吧,我们考场比较乱,开始比赛了,还有的电脑有故障,(向这些人发出同情),第一次认真参加比赛,真正比赛的时候感觉没有那么正式,很乱,各种小问题,(例如博主就没找到题目在哪里,找到后又不 ...
- c++ 整数和字符串的转化
一.string转int的方式 采用最原始的string, 然后按照十进制的特点进行算术运算得到int,但是这种方式太麻烦,这里不介绍了. 采用标准库中atoi函数. "; int a = ...