index.jspjavascript
<%@ 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 () { testRequestBody(); }); function testRequestBody() { $.ajax("${pageContext.request.contextPath}/json/testRequestBody",// 发送请求的URL字符串。 { dataType: "json", // 预期服务器返回的数据类型。 type: "post", // 请求方式 POST或GET contentType: "application/json", // 发送信息至服务器时的内容编码类型 // 发送到服务器的数据。 data: JSON.stringify({id: 1, name: "张三"}), async: true, // 默认设置下,全部请求均为异步请求。若是设置为false,则发送同步请求 // 请求成功后的回调函数。 success: function (data) { console.log(data); $("#id").html(data.id); $("#name").html(data.name); $("#author").html(data.author); }, // 请求出错时调用的函数 error: function () { alert("数据发送失败"); } }); } </script> </head> <body> 编号:<span id="id"></span><br> 书名:<span id="name"></span><br> 做者:<span id="author"></span><br> </body> </html>
BookController.javahtml
package com.rookie.bigdata.controller; import javax.servlet.http.HttpServletResponse; import com.rookie.bigdata.domain.Book; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import org.codehaus.jackson.map.ObjectMapper; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; @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.setAuthor("许文强"); response.setContentType("text/html;charset=UTF-8"); // 将book对象转换成json写出到客户端 response.getWriter().println(mapper.writeValueAsString(book)); } }
springmvc-config.xmljava
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd"> <!-- spring能够自动去扫描base-pack下面的包或者子包下面的java文件, 若是扫描到有Spring的相关注解的类,则把这些类注册为Spring的bean --> <context:component-scan base-package="org.fkit.controller"/> <!-- 设置配置方案 --> <mvc:annotation-driven/> <!-- 使用默认的Servlet来响应静态文件 --> <mvc:default-servlet-handler/> <!-- 视图解析器 --> <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <!-- 前缀 --> <property name="prefix"> <value>/WEB-INF/content/</value> </property> <!-- 后缀 --> <property name="suffix"> <value>.jsp</value> </property> </bean> </beans>
启动应用程序返回的截图以下
jquery
将上面的controller代码改成web
@RequestMapping(value="/testRequestBody") public void setJson(@RequestBody Book book, HttpServletResponse response) throws Exception{ // 使用JSONObject将book对象转换成json输出 logger.info(JSONObject.toJSONString(book)); book.setAuthor("zhangsan"); response.setContentType("text/html;charset=UTF-8"); // 将book对象转换成json写出到客户端 response.getWriter().println(JSONObject.toJSONString(book)); }
配置文件改成下面这个便可跟前面访问的效果同样ajax
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:util="http://www.springframework.org/schema/util" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.2.xsd"> <!-- spring能够自动去扫描base-pack下面的包或者子包下面的java文件, 若是扫描到有Spring的相关注解的类,则把这些类注册为Spring的bean --> <context:component-scan base-package="com.rookie.bigdata.controller"/> <!-- 使用默认的Servlet来响应静态文件 --> <mvc:default-servlet-handler/> <!-- 设置配置方案 --> <mvc:annotation-driven> <!-- 设置不使用默认的消息转换器 --> <mvc:message-converters register-defaults="false"> <!-- 配置Spring的转换器 --> <bean class="org.springframework.http.converter.StringHttpMessageConverter"/> <bean class="org.springframework.http.converter.xml.XmlAwareFormHttpMessageConverter"/> <bean class="org.springframework.http.converter.ByteArrayHttpMessageConverter"/> <bean class="org.springframework.http.converter.BufferedImageHttpMessageConverter"/> <!-- 配置fastjson中实现HttpMessageConverter接口的转换器 --> <bean id="fastJsonHttpMessageConverter" class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter"> <!-- 加入支持的媒体类型:返回contentType --> <property name="supportedMediaTypes"> <list> <!-- 这里顺序不能反,必定先写text/html,否则ie下会出现下载提示 --> <value>text/html;charset=UTF-8</value> <value>application/json;charset=UTF-8</value> </list> </property> </bean> </mvc:message-converters> </mvc:annotation-driven> <!-- 视图解析器 --> <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <!-- 前缀 --> <property name="prefix"> <value>/WEB-INF/content/</value> </property> <!-- 后缀 --> <property name="suffix"> <value>.jsp</value> </property> </bean> </beans>
@RequestMapping(value="/testresponse") // @ResponseBody会将集合数据转换json格式返回客户端 @ResponseBody public Object getJson() { List<Book> list = new ArrayList<Book>(); list.add(new Book(1,"java","lisi")); list.add(new Book(2,"徐文清","wangwu")); return list; }
<%@ 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/testresponse",null, function(data){ $.each(data,function(){ var tr = $("<tr align='center'/>"); $("<td/>").html(this.id).appendTo(tr); $("<td/>").html(this.name).appendTo(tr); $("<td/>").html(this.author).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>