springmvc基础知识（9）： springmvc中ajax的应用

jquery - ajax提交的参数说明

Datatype:
预期服务器返回的数据类型。如果不指定，将自动根据HTTP中MIME信息来智能判断

“json”: 返回 JSON 数据
“text”: 返回纯文本字符串

ContentType:
发送信息至服务器时内容编码类型

“application/x-www-form-urlencoded” ：表单类型，即简单键值对形式– 默认值
使用这种方式传输数据时，传输的内容需要按一定的格式:
key1=value1&key2=value2…格式,和key1:value1,key2:value2格式
传输时会被拆分成键值对放入request.paramter中，这是一个map。在后台可以使用request.getParamater(key)获取。这个map的获取类似hibernate的延迟加载，
当调用request.getParamater()方法，servlet才会从请求流中读取请求参数加载入map。InputStream也会存有这份数据，但如果这份数据被读取，那么到了controller层将无法读出数据，同样，拦截之后到达controller层时请求数据已经被加载入了controller层方法实参，实参对象需要有set方法，框架会以反射的方式调用属性的set方法注入数据，数据只会被注入到已有的属性。
“application/json; charset=utf-8”:json形式
当以application/json的content-type传送数据，被传送的对象只需被json序列化成json字符串,这种形式不会被map解析并存放,也就不能使用request.getparamter()方法进行获取。

Async:
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

Success:
请求成功后的回调函数。Function(a,b,c)有3个形参，a是返回的数据，b是”success”,c未知。形参的数目可以任意填写，按顺序加载实参

springmvc中ajax的应用

主要是在处理方法上注解@ResponseBody,让返回值写入response.body中，而且不进行页面跳转。

使用@ResponseBody注解的同时要导入json支持的包否则这个注解将不起作用。

添加依赖:

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.8.7</version>
</dependency>

加入了下面三个jar
这里写图片描述

数据交互方式

根据提交的数据的格式进行区分
方式一

数据格式： key1=value1&key2=value2...
使用POST方式提交：
contentType:”application/json; charset=utf-8” – 后台无法获取值
contentType:”application/x-www-form-urlencoded” – 后台可以获取值,如果没有设置乱码过滤,这种方式后台接收到的参数会产生乱码。
因为GET方式请求，参数会解析加入到url上进行提交，这时候就与contentType无关了。当使用GET方式提交时两者都可以获取值，但是需要考虑GET方式乱码问题。

$(“form”).serialize();表单序列化后的数据就是这种数据格式key1=value1&key2=value2

前台：

var data = "userName=小明&password=123456";
$.ajax({
    type : "POST",
    url : "testAjax.do",
    dataType : "json",
    contentType : "application/json;charset=utf-8",
    data : data,
    success : function(data) {
        var jsons = data;
        for (var i = 0; i < jsons.length; i++) {
            alert("userName:"+jsons[i].userName+",password:"+jsons[i].password);
        }
    }
});

后台：

@RequestMapping("/testAjax.do")
@ResponseBody
public List<User> testAjax(String name,String age){
    System.out.println(user);
    List<User> list = new ArrayList<User>();
    list.add(user);
    return list;
}

后台直接从request.paramter中获取到数据。
这种方式只能传递一些简单的键值对数据,对于一些复杂的数据就无能为力了。

方式二：
- 数据格式： {key1:value1,key2:value2...}
- 使用POST方式提交：
contentType:”application/json; charset=utf-8” – 后台无法获取值
contentType:”application/x-www-form-urlencoded” – 后台可以获取值,如果没有设置乱码过滤,这种方式后台接收到的数据中文也不会乱码。
- 当使用GET方式提交时两者都可以获取值，但是需要考虑GET方式乱码问题。

前台：

var data = {"userName":"小明","password":123456};
$.ajax({
    type : "POST",
    url : "testAjax.do",
    dataType : "json",
    contentType : "application/json;charset=utf-8",
    data : data,
    success : function(data) {
        var jsons = data;
        for (var i = 0; i < jsons.length; i++) {
            alert("userName:"+jsons[i].userName+",password:"+jsons[i].password);
        }
    }
});

后台：
同方式一

方式三：
- 数据格式：json字符串 JSON.stringify({key1:value1,key2:value2...})
- 使用POST方式提交：
contentType:”application/json; charset=utf-8” – 后台可以获取值且会解决中文乱码的问题。
contentType:”application/x-www-form-urlencoded” – 后台无法获取值。
- 当使用GET方式提交时两者都可以获取值，但是需要考虑GET方式乱码问题。

2.@RequestBody 不需要导入额外的jar包
3.contentType必须声明为”application/json;charset=utf-8”,不然会报错

前台：

var saveDataAry = [];
var data1 = {
    "userName" : "test",
    "password" : 123
};
var data2 = {
    "userName" : "ququ",
    "password" : 456
};
saveDataAry.push(data1);
saveDataAry.push(data2);
$.ajax({
    url : "testAjax.do",
    data : JSON.stringify(saveDataAry),
    contentType : "application/json;charset=utf-8",
    type : "POST",
    success : function(data) {
        var jsons = data;
        for (var i = 0; i < jsons.length; i++) {
            alert("userName:" + jsons[i].userName
                    + ",password:" + jsons[i].password);
        }
    }
});

后台：

@RequestMapping("/testAjax.do")
@ResponseBody
public List<User> testAjax(@RequestBody List<User> user){
    System.out.println(user);
    return user;
}

后台接收参数必须使用@RequestBody注解 i)该注解用于读取Request请求的body部分数据，使用系统默认配置的HttpMessageConverter进行解析，然后把相应的数据绑定到要返回的对象上；
ii) 再把HttpMessageConverter返回的对象数据绑定到 controller中方法的参数上。

@ResponseBody
该注解用于将Controller的方法返回的对象，通过适当的HttpMessageConverter转换为指定格式后，写入到Response对象的body数据区。

可以自定义一个HttpMessageConverter

<!-- 从请求和响应读取/编写字符串 -->
<bean id="stringHttpMessage"
    class="org.springframework.http.converter.StringHttpMessageConverter">
    <property name="supportedMediaTypes">
        <list>
            <value>text/plain;charset=UTF-8</value>
        </list>
    </property>
</bean>

<!-- 用于将对象转化为JSON -->
<bean id="jsonConverter"
    class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"></bean>

<mvc:annotation-driven>
    <mvc:message-converters>
        <ref bean="stringHttpMessage"/>
        <ref bean="jsonConverter"/>
    </mvc:message-converters>
</mvc:annotation-driven>

方式4：
后台使用hashmap接受前段的值

方式5：
后台不使用@Respone自动转换json数据，而使用respone,write方法写入,不推荐。