AJAX前端请求数据处理
SpringMVC后台接受请求数据
SpringMVC对返回给前端数据处理
AJAX前端处理后台返回的数据
注意点：
1.ajax提交的参数说明
Datatype:
预期服务器返回的数据类型。如果不指定，jQuery将自动根据
HTTP包MIME信息来智能判断
"json": 返回 JSON 数据
"text": 返回纯文本字符串
ContentType:
默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
Async:
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
Success:
请求成功后的回调函数。Function(a,b,c)有3个形参，a是返回的数据，b是”success”,c未知。形参的数目可以任意填写，按顺序加载实参
2.使用@ResponseBody注解的同时要导入
jackson-core-asl-1.8.8.jar
Jackson-mapper-asl-1.8.8.jar
该注解的功能才会生效
方式1：
ajax数据为url后缀的格式
注意：
这种方式，
提交方式使用POST时
contentType: "application/json; charset=utf-8",后台无法获取值
contentType:"application/x-www-form-urlencoded",后台可以获取值
当提交方式使用get时
两者都可以获取值
前台：
function ajaxTest1(){
$.ajax({
data:"name=小红&age=12",
type:"POST",
dataType: ‘json‘,
url:"ajax/test1",
success:function(data){
alert("success");
alert(data.name);
alert(data.age);
},
error:function(data){
alert("fail");
}
});
}
后台：
@RequestMapping(value="ajax/test1")
public @ResponseBody Map<String,Object> login1(HttpServletRequest request,HttpServletResponse response) throws IOException{
System.out.println(request.getParameter("name"));
System.out.println(request.getParameter("age"));
Map<String,Object> map = new HashMap<String,Object>();
map.put("name",request.getParameter("name"));
map.put("age",request.getParameter("age"));
return map;
}
方式2：
Ajax数据为json格式
注意：
这种方式，
提交方式使用POST时
contentType: "application/json; charset=utf-8",后台无法获取值
contentType:"application/x-www-form-urlencoded",后台可以获取值。且中文不乱码
当提交方式使用get时
两者都可以获取值，但是中文乱码
前台：
function ajaxTest2(){
$.ajax({
data:{"name":"小红","age":21},
type:"POST",
dataType: ‘json‘,
url:"ajax/test2",
success:function(data){
alert("success");
alert(data.name);
alert(data.age);
},
error:function(data){
alert("fail");
}
});
}
后台：
@RequestMapping(value="ajax/test2")
public @ResponseBody Map<String,Object> login2(HttpServletRequest request,HttpServletResponse response) throws IOException{
System.out.println(request.getParameter("name"));
System.out.println(request.getParameter("age"));
Map<String,Object> map = new HashMap<String,Object>();
map.put("name",request.getParameter("name"));
map.put("age",request.getParameter("age"));
return map;
}
方式3：
Ajax数据为json转字符串
注意：
1.前台json数据的key必须和后台bean对应
所以以下清空会报错
var data = {"name":"小红","age":12,"sex":"女"};
var data = {"name":"小红","sex":"女"};
前台的json数据中key可以缺省
所以以下情况正确
var data = {"name":"小红"};
[email protected] 不需要导入额外的jar包
3.contentType必须声明为"application/json;charset=utf-8",不然会报错
前台：
function ajaxTest3(){
var data = {"name":"小红","age":12};
$.ajax({
url: "ajax/test3",
data: JSON.stringify(data),
contentType: "application/json;charset=utf-8",
type: "POST",
success:function(data){
alert("success");
alert(data.name);
alert(data.age);
},
error:function(data,b,c){
alert("fail");
alert(b);
}
});
}
后台：
@RequestMapping(value="ajax/test3")
public @ResponseBody Person login3(@RequestBody Person aa ) throws IOException{
System.out.println(aa);
return aa;
}
自定义一个Person类：
public class Person {
private String name;
private int age;
public String getName() { return name; }
public void setName(String name) { this.name = name; }
public int getAge() { return age; }
public void setAge(int age) { this.age = age; }
}
方式4：
后台使用hashmap接受前段的值
方式5：
后台不使用@Respone自动转换json数据，而使用respone,write方法写入