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或GETcontentType : "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格式,并将其返回客户端 @ResponseBodypublic 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企业应用实战》
转载于:https://www.cnblogs.com/zeroingToOne/p/8917684.html
springmvc+json 前后台数据交互相关推荐
- Vue前后台数据交互实例演示,使用axios传递json字符串、数组
Vue 前后台数据交互实例演示 第一章:后台实现 ① Python 启用 Flask 服务器 ② 后台启用成功验证 第二章:前台实现 ① Vue 使用 Axios 实现接收 json 字符串.数组数据 ...
- pycharm+python+bootstrap写一个登陆界面_Python--day56(前后台数据交互、bootstrap)
1. 前后台数据交互 1.1 socket搭建后台 [注意点]: 1. 前台发送的数据是用\r\n进行换行 2. 路由:请求的路径,获得路由的途径是通过后台对前台发送的数据进行拆分(split)得到, ...
- PHP JSON格式数据交互实例代码详解_php技巧_脚本之家
http://www.jb51.net/article/26007.htm 此前我写了不少在PHP网站开发中应用XML进行数据交互的实例,这两天通过PHP解析JSON并进行交互的实例学习和了解了JSO ...
- springMVC前后端数据交互
springMVC前后端数据及交互部分是最重要的,因为其余部分都被封装好了,我们要做的就是这个部分,我的框架才用SSM,进公司以来在项目组也用到了这些,但是不够全面,系统,脑子里面思路混乱,所以总结下 ...
- easy-table-vue+Vue、SpringBoot+Mybatis实现MVVM模型前后台数据交互
原文链接:https://www.cnblogs.com/wlovet/p/10980579.html 根据原贴在搭建过程中出现的问题,我在该博客https://blog.csdn.net/Sun_o ...
- easy-table-vue+VueJs、SpringBoot+Mybatis实现MVVM模型前后台数据交互
该项目分为前端展示部分和后台服务部分. 前端部分 使用的技术是:NodeJs.Webpack.VueJs 使用的组件库是:IVIEW.easy-table-vue 使用的开发工具是:WebStorm ...
- asp.net使用easyUI 前后台数据交互
// 1. asp页面使用EasyUI框架需要的Css样式和JS <script src="../script/jquery-easyui-1.4.5/jquery.min.js&qu ...
- web前后台数据交互
1.利用cookie对象 Cookie是服务器保存在客户端中的一小段数据信息.使用Cookie有一个前提,就是客户端浏览器允许使用Cookie并对此做出相应的设置.一般不赞成使用Cookie. (1) ...
- 实现前后台数据交互(上传/回传单个JSON数据和上传/回传JSON数组)
一.上传单个JSON数据 所需jar文件: 创建JSON实体类: package domain;public class Data1 {private String name;private Stri ...
最新文章
- PyTorch框架:(1)基本处理操作
- 2019年度CSDN博客之星TOP10榜单揭晓,你上榜了吗?
- 数据库的优化tips
- javascript删除元素节点
- struts2配置中Action的name 和package的name和namespace作用
- 不会吸引人的JavaDocs源样本
- 自定义控件(视图)2期笔记13:View的滑动冲突之 内部拦截法
- Annotation 最终奥义,元注解
- asp连接mysql数据库增删查_【ASP】ASP对Access数据库的连接、增删改查及ASP的基本语法...
- .net HTML编码解析
- 量化投资学习——统计套利综述
- 计算机应用基础搜题答案,大一计算机应用基础试题及答案
- Unity 3D游戏-塔防类游戏源码:重要方法和功能的实现
- rancher报错Not using `--random-fully` in the MASQUERADE rule for iptables because the local version of
- java实现华氏温度和摄氏温度互相转换
- 近600个教学学习资料链接(zz)
- IE 浏览器阻止打印页面的方法
- 高等数学(第七版)同济大学 习题7-2 个人解答
- saas系统需要什么样的云服务器,SAAS系统和云服务器的区别
- 转帖:夜夜听雨(四)(中国社会科学院 郑哲)
热门文章
- codevs 3287 货车运输 NOIP2013提高组
- Openfire开发配置,Openfire源码配置,OpenFire二次开发配置
- TeraData数据库,将Excel文件存入数据库并取出打开
- TIP 2021论文:多曝光图像融合及超分辨的联合实现
- 目标检测多模型集成方法总结
- 字节跳动实验室招聘户型图理解实习生|北京
- CV与物理模型的结合,正在改变传统天气预报
- 强化学习常用算法+实际应用
- 中科院地平线开源state-of-the-art行人重识别算法EANet:增强跨域行人重识别中的部件对齐...
- HTML表格属性跨列,HTML表格的使用 与 跨行跨列