Spring mvc,jQuery和JSON数据交互

一、实验环境的搭建

1、Spring mvc jar。

导入spring mvc运行所需jar包。导入如下（有多余）

2、json的支持jar

3、加入jQuery。

选用jquery-3.0.0.min.js，放在WebRoot/JS文件夹

导入jQuery到jsp页面如下

4、web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">

<display-name>springmvcjson</display-name>

<servlet>

<servlet-name>springmvc</servlet-name>

<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

<init-param>

<param-name>contextConfigLocation</param-name>

<param-value>classpath:springmvc.xml</param-value>

</init-param>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>springmvc</servlet-name>

<url-pattern>*.action</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>index.html</welcome-file>

<welcome-file>index.htm</welcome-file>

<welcome-file>index.jsp</welcome-file>

<welcome-file>default.html</welcome-file>

<welcome-file>default.htm</welcome-file>

<welcome-file>default.jsp</welcome-file>

</welcome-file-list>

</web-app>

5、springmvc.xml

classpath下

<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"

xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"

xsi:schemaLocation="http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans-3.2.xsd

http://www.springframework.org/schema/mvc

http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd

http://www.springframework.org/schema/context

http://www.springframework.org/schema/context/spring-context-3.2.xsd

http://www.springframework.org/schema/aop

http://www.springframework.org/schema/aop/spring-aop-3.2.xsd

http://www.springframework.org/schema/tx

http://www.springframework.org/schema/tx/spring-tx-3.2.xsd ">

<!-- <bean name="/test01.action" class="com.xzw.json.controller.JsonTest"></bean> -->

<!-- View -->

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"></bean>

<!-- 注解映射和适配器 -->

<mvc:annotation-driven ></mvc:annotation-driven>

<!-- 组件扫描 -->

<context:component-scan base-package="com.xzw.json.controller"></context:component-scan>

<!-- 使用@Autowired、@Required等注解

如不必设置<bean class="org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor "/>和

<bean class="org.springframework.beans.factory.annotation.RequiredAnnotationBeanPostProcessor"/>等等

-->

<context:annotation-config />

</beans>

二、实验例子编写

1、请求和返回都是JSON

a).程序发起

index.jsp的一个按钮

b).js函数

function requestByJson() {

$.ajax({

type : 'post',

url : '${pageContext.request.contextPath}/jsonsource.action',

//设置contentType类型为json

contentType : 'application/json;charset=utf-8',

//json数据

data : '{"username":"reader001","password":"psw001"}',

//请求成功后的回调函数

success : function(data) {

alert(data.username);

}

});

}

c).Controller/Mapping

@RequestMapping("/jsonsource")

//@RequestBody 将json对象转成java对象

//@ResponseBody 表示返回的是json对象

public @ResponseBody User jsonSource(@RequestBody User user){

return user;

}

d).测试结果

查看浏览器的开发者工具信息

request

response

PS:User类有3个属性，id,username,password。

回调函数使用alert(data.username);

2、请求是key/value值，返回JSON

a).程序发起

b).js函数

//请求是key-value的值，返回的是json

function resquestByKV() {

$.ajax({

type : 'post',

url : '${pageContext.request.contextPath}/kvsource.action',

data : 'username=kvuser&password=kvpsw',

success : function(data) {

alert(data.username);

}

});

}

c).Controller/Mapping

参数没有@RequestBody。

d).测试结果

参考1。

三、提交表单数据，返回json结果。

1、实验准备和预测

设计两个form，将form1的数据提交后，做一定的处理后返回到form2。处理结果依据controller。

2、将数据作为json发出

a).JS函数

b).Controller

c).结果

实验过程，发现如果要传递json数据（java程序传出），由于json的字符串要在双引号中，要达到双引号的效果，引号较混乱。

3、将数据作为key/value的形式发出。

a).JS函数

b).Controller

c).结果

四、Spring mvc和ajax中文乱码问题

1、返回的java对象

如果是java对象作为json对象返回的话，不需要设置过滤器，spring的配置文件也没有设置字符编码，中文正常返回。估计是json的支持包或spring有编码的设置。

2、返回字符串

例子请求的是这个方法

a).设置filter字符编码

spring的字符过滤器org.springframework.web.filter.CharacterEncodingFilter

无效，是乱码。显示如下

b).解决方法一、@ResponseBody

加上produces。如produces="application/json; charset=utf-8"。

设置后没有乱码

c).解决方法二、mvc:annotation-driven

这个方法是针对所有。

在mvc:annotation-driven加上下面的StringHttpMessageConverter

主要是text/html;charset=UTF-8就可以，其他都不可以。避免乱码。

<mvc:annotation-driven>

<mvc:message-converters register-defaults="true">

<bean class="org.springframework.http.converter.StringHttpMessageConverter">

<property name="supportedMediaTypes">

<list>

<!--application/json和text/plain无法解决返回字符串的乱码  -->

<!-- <value>application/json;charset=UTF-8</value>

<value>text/plain;charset=UTF-8</value>

-->

<value>text/html;charset=UTF-8</value>

</list>

</property>

</bean>

</mvc:message-converters>

</mvc:annotation-driven>

发现：再去掉注解中的参数produces="application/json; charset=utf-8"，然后测试。supportedMediaTypes加入text/html;charset=UTF-8能解决乱码。且java对象的json返回也没有出现乱码问题。