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 前后台数据交互的更多相关文章

  1. 测开之路一百五十四：ajax+json前后台数据交互

    在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...

  2. Phonegap开发的前后台数据交互

    在用Phonegap开发时,需要进行前后台数据交互,在网上找资料,很多东西让人一头雾水,最后借鉴了下面的博客: http://blog.sina.com.cn/s/blog_681929ae01017 ...

  3. Spring MVC 前后台数据交互

    本文是转载文章,感觉比较好,如有侵权,请联系本人,我将及时删除. 原文网址地址:<Spring MVC 前后台数据交互> 1.服务端数据到客户端 (1)返回页面,Controller中方法 ...

  4. Django学习笔记（8）——前后台数据交互实战（AJAX）

    这里将自己这段时间学习的关于前后台数据交互的笔记写在这里,这里包含了Django传输数据给JS,AJAX的相关问题,跨域问题,如何解决AJAX的跨域问题等等.比较凌乱,请看到这篇博客的盆友见谅,如果我 ...

  5. HTML和JSON的数据交互-jsonp跨域

    HTML和json的数据交互 <!DOCTYPE html> <html> <head> <script src="//ajax.googleapi ...

  6. HTML和JSON的数据交互-HTML模板

    直接上源码,原文http://www.zhangxinxu.com/wordpress/2012/09/javascript-html-json-template/ <!DOCTYPE html ...

  7. 用PHP和Ajax进行前后台数据交互——以用户登录为例

    很多网站中都有用户登录系统,要完成用户的注册和登陆,就一定要用到前后台的数据交互.在这里以简单的用户注册和登陆为例介绍一下前后台交互的大致流程. 首先,我们来做一个简单的登陆界面. 这里为了方便我使用 ...

  8. vue仓库、组件间通信、前后台数据交互、前端储存数据大汇总

    目录 路由重定向 仓库介绍 vuex插件:可以完成任意组件间信息交互(移动端) 前端存储数据大汇总 前后台交互方式(重点) 前后台数据交互 axios插件:完成前后台ajax交互的 同源策略 - 前后 ...

  9. 玩转Web之Json（二）----jquery easy ui + Ajax +Json+SQL实现前后台数据交互

    最近在学Json,在网上也找过一些资料,觉得有点乱,在这里,我以easy ui的登录界面为例来说一下怎样用Json实现前后台的数据交互 使用Json,首先需要导入一些jar包,这些资源可以在网上下载到 ...

随机推荐

  1. Linux下nginx编译安装教程和编译参数详解

    这篇文章主要介绍了Linux下nginx编译安装教程和编译参数详解,需要的朋友可以参考下 一.必要软件准备1.安装pcre 为了支持rewrite功能,我们需要安装pcre 复制代码代码如下: # y ...

  2. 从轻测到上线，WeTest与《一起来捉妖》测试方案大公开

    从2016年Pokémon GO引发的AR游戏热潮开始,国内就一直在期待新的一款具备代表性的AR游戏的头部作品. 4月11日的腾讯首款AR探索手游<一起来捉妖>不仅为国内市场注入了新的活力 ...

  3. VRRP+tunnel+IP SLA+Track实现冗余切换

    IP SLA(Internet Protocol Service-Level Agreement)互联网服务等级协议,本实验里通过发送测试报文,测试下一跳是否可达,结合Track实现冗余静态路由的切换 ...

  4. 接口测试中抓包工具Charles的使用

    在被测接口并没有明确的接口文档给出时,我们需要借助抓包工具来帮助测试,利用抓包工具我们几乎可以获得接口文档中能给你的一切.常见的抓包工具有Charles和Fiddler, Fiddler只能用在Win ...

  5. 使用CDN后配置nginx自定义日志获取访问用户的真实IP

    问题描述:         新上线了一个项目,架构如下(简单画的理解就好): 问题是:负载前面加上CDN后负载这里无法获取客户的真实访问IP,只能过去到CDN的IP地址: 问题解决: 修改nginx日 ...

  6. 0.3 CMD常用命令！以及用CMD显得自己高大上

    CMD是大家熟知的Windows命令提示符(cmd.exe),它是 Windows NT 下的一个用于运行 Windows 控制面板程序或某些 DOS 程序的shell程序. CMD命令快捷键是:wi ...

  7. python数据分析系列(1)

    目录 python基础 python语言基础 Ipython的一些特性 Python语法基础 Python控制流 lambda表达式 Python的数据结构 元组 列表 字典 集合 列表.集合.字典推 ...

  8. Cocos2dx源码赏析(1)之启动流程与主循环

    Cocos2dx源码赏析(1)之启动流程与主循环 我们知道Cocos2dx是一款开源的跨平台游戏引擎,而学习开源项目一个较实用的办法就是读源码.所谓,"源码之前,了无秘密".而笔者 ...

  9. MariaDB远程连接问题

    MariaDB在设置完通过Navicat Premium远程连接账号验证通过,但是无法正常使用工具的功能,只能使用sql语句查询,但是通过控制台命令功能正常. 经过修改账号权限,添加新用户等功能都无法 ...

  10. python3去除字符串中括号及括号里面的内容

    a = """ <option value="search-alias=arts-crafts-intl-ship">Arts & ...