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":"小紅"};
2.@RequestBody 不需要導入額外的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方法寫入