SpringMVC使用Ajax异步提交

一 Json介绍

• JSON（JavaScript Object Notation，JS对象标记）是一种轻量级的数据交换格式
• 基于JavaScript的一个子集，使用了C、C++、C#、Java、JavaScript、Perl、Python等其他语言的约定，采用完全独立于编程语言的文本格式来存储和表示数据
• JSON与XML非常相似，都是用来存储数据的，并且都是基于纯文本的数据格式
• 与XML相比，JSON解析速度更快，占用空间更小，且易于阅读和编写，同时也易于机器解析和生成

一.1 Json对象结构

• 对象结构以“{”开始，以“}”结束。中间部分由0个或多个以英文“,”分隔的name:value对构成注意name和value之间以英文“:”分隔
• 一个address对象包含城市、街道、邮编等信息，使用JSON的表示形式如下：
  {“city”:“Beijing”,“street”:“Xisanqi”,“postcode”:100096}

一.2 Json数组结构

• 数组结构以“[”开始，以“]”结束。中间部分由0个或多个以英文“,”分隔的值的列表组成，其存储形式如下图所示

			[
            value1,
            value2,  
             ...
             ]

• 一个数组包含了String、Number、Boolean、null类型数据，使用JSON的表示形式如下["abc",12345,false,null]

一.3 Json数组与对象的结合

• 对象、数组数据结构也可以分别组合构成更为复杂的数据结构
• 例如：一个person对象包含name、hobby和address对象，其代码表现形式如下

{
"name": "zhangsan"
"hobby":["篮球","羽毛球","游泳"]
"address":{
	"city":"Beijing"
	"street":"Xisanqi"
	"postcode":100096
}
 }

二 Spring框架中JSON数据转换

• Spring提供了一个HttpMessageConverter<T>接口来实现浏览器与控制器类（Controller）之间的数据交互
• 该接口主要用于将请求信息中的数据转换为一个类型为T的对象，并将类型为T的对象绑定到请求方法的参数中，或者将对象转换为响应信息传递给浏览器显示
• HttpMessageConverter接口有很多实现类，这些实现类可以对不同类型的数据进行信息转换
• 其中MappingJackson2HttpMessageConverter是Spring MVC默认处理JSON格式请求响应的实现类
• 该实现类利用Jackson开源包读写JSON数据，将Java对象转换为JSON对象和XML文档，同时也可以将JSON对象和XML文档转换为Java对象

二.1 配置JSON转换器

• 除了常用的<mvc:annotation-drivern />方式配置外，还可以使用标签的方式进行显示的配置。具体配置方式如下：

<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping" />
<bean class=" org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter" />
       <property name="messageConverters">
            <list>
                  <bean class="  org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" />
            </list>
       </property>
</bean>

三 Spring中使用注解开发

• 在使用注解式开发时，需要用到2个重要的JSON格式转换注解，分别为@RequestBody和@ResponseBody
  

@Controller
public class UserController {
	
	@RequestMapping(value="/testJson")
	// 响应异步请求
	@ResponseBody
	public User handleUserJson(@RequestBody User user) {
		user.setUsername(user.getUsername() + "_new");
		return user;
	}
}

三.1 Maven/pom.xml

<!-- Json配置的第三方依赖 -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			<version>2.9.8</version>
		</dependency>
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-core</artifactId>
			<version>2.9.8</version>
		</dependency>
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-annotations</artifactId>
			<version>2.9.8</version>
		</dependency>

三.2 SpringMVC配置

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
	http://www.springframework.org/schema/beans/spring-beans.xsd
	http://www.springframework.org/schema/mvc
    http://www.springframework.org/schema/mvc/spring-mvc.xsd	
	http://www.springframework.org/schema/context 
    http://www.springframework.org/schema/context/spring-context.xsd">	
    
	<context:component-scan base-package="com.hlq.*" />
	<bean id="viewResolver"		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<!-- 设置前缀 -->
		<property name="prefix" value="/WEB-INF/jsp/" />
		<!-- 设置后缀 -->
		<property name="suffix" value=".jsp" />
	</bean>	
	
	<mvc:annotation-driven />
	<!--配置静态资源的访问映射，此配置中的文件，将不被前端控制器拦截 -->
	<mvc:resources location="/js/" mapping="/js/**" />
	
	<mvc:default-servlet-handler/>
	
</beans>

• 除了使用<mvc:resources>元素可以实现对静态资源的访问外，还有另外2种静态资源访问的配置方式，分别如下

1. 在springmvc-config.xml文件中，使用mvc:default-servlet-handler标签

      <mvc:default-servlet-handler />

2. 激活Tomcat默认的Servlet来处理静态文件访问

<!--激活tomcat的静态资源拦截，需要哪些静态文件，再往下追加-->
<servlet-mapping>
	<servlet-name>default</servlet-name>
	<url-pattern>*.js</url-pattern>
</servlet-mapping>
<servlet-mapping>
	<servlet-name>default</servlet-name>
	<url-pattern>*.css</url-pattern>
</servlet-mapping>
...

三.3 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>Archetype Created Web Application</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-config.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>springmvc</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>   

<!--激活tomcat的静态资源拦截，需要哪些静态文件，再往下追加，与springmvc-config.xml文件中的<mvc:resources>标签是同样的功能，可以二选其一即可 -->
 	<servlet-mapping>
		<servlet-name>default</servlet-name>
		<url-pattern>*.js</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>default</servlet-name>
		<url-pattern>*.css</url-pattern>
	</servlet-mapping> 
</web-app>

可访问本地文件

四 Ajax请求方法

<script src="js/jquery.js"></script>
<script type="text/javascript">
	function testJson() {
		// 获取输入的用户名和密码
		var username = $("#username").val();
		var password = $("#password").val();
		
		$.ajax({
			
			url: "${pageContext.request.contextPath}/testJson", // 配置请求的url
			// 请求方式
			type: "post",
			// contentType发送的数据格式
			contentType: "application/json;charset=UTF-8",
			// data请求的数据
			data: JSON.stringify({
				username: username,
				password: password
				
			}), 
			// 接收的数据格式
			dataType: "json",
			
			// 请求成功后的处理
			success: function (data) {
				if (data != null) {
					console.log(data);
				} 
			}
			
		});
		
	}
</script>