前端和java后台的数据交互

在说数据交互之前，先了解一下相关信息：

spring相关注解：
[email protected]
用来处理Content-Type: 为 application/x-www-form-urlencoded编码的内容。（Http协议中，如果不指定Content-Type，则默认传递的参数就是application/x-www-form-urlencoded类型）

[email protected]
处理HttpEntity传递过来的数据，一般用来处理非Content-Type: application/x-www-form-urlencoded编码格式的数据。

• GET请求中，因为没有HttpEntity，所以@RequestBody并不适用。

• POST请求中，通过HttpEntity传递的参数，必须要在请求头中声明数据的类型Content-Type，SpringMVC通过使用HandlerAdapter 配置的HttpMessageConverters来解析HttpEntity中的数据，然后绑定到相应的bean上。

注意事项：
Get不能使用表单，只能在url中传参，传参方式只有这一种。 Post可以使用表单，也可以在url中传参。使用表单时有几种数据类型（表现为数据的存储位置不同）：

1、 x-www-form-urlencoded 参数存储在query中 用@RequestParam接收。

2、formdata 参数存储在body中，用@RequestBody接收，文件类型用@RequestPart接收。

3、raw(josn,xml) 参数存储在body中 用@RequetBody接收。

总结一下：

• 凡是放在body中的都可以用@RequestBody接收
• 文件类型的数据可以用@RequestPart接收。
• 凡是放在query中的都可以用@RequestParam接收，包括Get方式提交和Post(x-www-form-urlencoded)方式提交的。

前端相关：
1.json对象和json字符串的区别：

json对象：

• 最显著的特征：对象的值可以用 “对象.属性” 进行访问；
• typeOf(json对象) ===> Object类型
• 例子如下：

var person={"name":"shily","sex":"女","age":"23"}//json对象
console.log(person);
console.log(person.name);
console.log(typeof person);

输出结果是：

Json字符串就是字符串：

var person='{"name":"shily","sex":"女","age":"23"}';//json字符串
console.log(person)
console.log(person.name)
console.log(typeof person)

2.Json对象与Json字符串的相互转化

Json字符串转化为Json对象 ：JSON.parse()

var  str = '{"name":"shily","sex":"女","age":"23"}';
var  strToObj = JSON.parse(str);
console.log(strToObj);
console.log(typeof strToObj);
console.log(strToObj.name)

Json对象转化为Json字符串： JSON.stringify()

var  obj = {"name":"shily","sex":"女","age":"23"}//json对象
var  objToStr = JSON.stringify(obj);
console.log(objToStr);
console.log(typeof objToStr)

一 后台接受前端数据的三种方式
[email protected]

1.1 前端发出的请求：path?id=1;

// 单个数据,@RequestParam中的值一定要与前端属性名一致
@RequestMapper(value="path")
public void test(@RequestParam("id)" String name){
	System.out.println(params);
}

1.2 请求地址:localhost:8080/test?name=testname&pwd=123456封装为map

// 数组数据
@RequestMapper(value="path")
public void test(@RequestParam Map<String,Object> params){
		String name = (String) query.get("name");
        String pwd = (String) query.get("pwd");
        System.out.println(name);
        System.out.println(pwd);

}

[email protected]
前端发出的请求：path/{id};

@RequestMapper(value="path/{id}")
public void test(@PathVariable("id") int id){
	System.out.println(id);
}

[email protected]
获取前台出来的json格式的数据

<script type="text/javascript">  
    $(document).ready(function(){  
        var saveDataAry=[];  
        var data1={"userName":"test","address":"gz"};  
        var data2={"userName":"ququ","address":"gr"};  
        saveDataAry.push(data1);  
        saveDataAry.push(data2);         
        $.ajax({ 
            type:"POST", 
            url:"user/saveUser", 
            dataType:"json",      
            contentType:"application/json",               
            data:JSON.stringify(saveData), 
            success:function(data){ 

            } 
         }); 
    });  
</script>

上面代码，封装到数组中，其表现为：

[
    {"userName":"test","address":"gz"},
    {"userName":"ququ","address":"gr"}
]

JSON.stringify(saveData)将其转换为json字符串：同时ajax请求的时候也要指定dataType: “json”,contentType:”application/json” 这样就可以轻易的将一个对象或者List传到Java端。

Controller
@RequestMapping(value = "saveUser", method=RequestMethod.POST ) 
@ResponseBody  
public void saveUser(@RequestBody List<User> users) { 
    userService.batchSave(users); 
} 

GET、POST方式提时， 根据request header Content-Type的值来判断:

• application/x-www-form-urlencoded， 可选（即非必须，因为这种情况的数据@RequestParam, @ModelAttribute也可以处理，当然@RequestBody也能处理）；

• multipart/form-data, 不能处理（即使用@RequestBody不能处理这种格式的数据）；

• 其他格式， 必须（其他格式包括application/json, application/xml等。这些格式的数据，必须使用@RequestBody来处理）。