Spring mvc,jQuery和JSON数据交互 一、实验环境的搭建 二、实验例子编写 三、提交表单数据,返回json结果。 四、Spring mvc和ajax中文乱码问题

Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

1、Spring mvc jar。

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

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

2、json的支持jar

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

3、加入jQuery。

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

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

导入jQuery到jsp页面如下

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

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

  <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的一个按钮

Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

b).js函数

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

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

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

response

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

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

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

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

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

a).程序发起

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

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

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

参数没有@RequestBody。

d).测试结果

参考1。

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

1、实验准备和预测

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

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

2、将数据作为json发出

a).JS函数

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

b).Controller

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

c).结果

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

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

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

a).JS函数

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

b).Controller

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

c).结果

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

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

1、返回的java对象

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

2、返回字符串

例子请求的是这个方法

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

a).设置filter字符编码

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

无效,是乱码。显示如下

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

b).解决方法一、@ResponseBody

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

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

设置后没有乱码

 Spring mvc,jQuery和JSON数据交互
一、实验环境的搭建
二、实验例子编写
三、提交表单数据,返回json结果。
四、Spring mvc和ajax中文乱码问题

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返回也没有出现乱码问题。