JavaWeb開發(fā)$.ajax如何向后臺傳輸數(shù)據(jù)
在Web開發(fā)中,前臺和后臺的數(shù)據(jù)交互是十分頻繁的, 而JQuery對Ajax進(jìn)行了封裝,使得前臺向后臺發(fā)送數(shù)據(jù)變得十分簡單。
假如后臺有一個Java類User,來接收并封裝數(shù)據(jù)
public class User{
private Interger id;
private String name;
private String sex;
}
12345一、簡單的數(shù)據(jù)格式
$.ajax發(fā)送數(shù)據(jù)的幾種形式
//1 直接在url中傳遞
$.ajax({
type: "POST",
url: "/testAjax/addUser?id=1&name=zhangxiaofan&sex=male",
success:function(data){
//TODO
}
})
//2 html頁面from表單序列化
var formData = $("#form").serialize();
$.ajax({
type: "POST",
url: "/testAjax/addUser",
data: formData,
success:function(data){
//TODO
}
})
//3 拼接data字符串
var formData = $("#form").serialize();
$.ajax({
type: "POST",
url: "/testAjax/addUser",
data: "id=1&name=zhangxiaofan&sex=male",
success:function(data){
//TODO
}
})
//4 簡單的js對象
var userData = {
id:1,
name:zhangxiaofan,
sex:male
}
$.ajax({
type: "POST",
url: "/testAjax/addUser",
data: userData, //或者data:{id:1,name:zhangxiaofan,sex:male}
success:function(data){
//TODO
}
})
123456789101112131415161718192021222324252627282930313233343536373839404142434445針對以上方式,后臺數(shù)據(jù)的獲?。⊿pringMvc框架)
@RequestMapping(value = "/testAjax")
public class UserController{
// 1 將User放到參數(shù)中,框架進(jìn)行封裝
@RequestMapping(value = "/addUser")
public String addUser(User user) {
//TODO
}
// 2 自己獲取
@RequestMapping(value = "/addUser")
public String addUser(HttpServletRequest request) {
String id = request.getParameter("id");
String name = request.getParameter("name");
String sex= request.getParameter("sex");
}
}
123456789101112131415161718二、復(fù)雜的數(shù)據(jù)格式
復(fù)雜的數(shù)據(jù)一般采用JSON格式來傳輸,并且Java對JSON格式的數(shù)據(jù)也都有很好的支持,如JSON-lib的JSONArray和JSONObject、jackson等技術(shù)。?
注意:?前后臺傳輸?shù)腏SON數(shù)據(jù)一般是JSON對象序列化的字符串,而不是直接傳遞JSON對象。
//1 JSON對象
var user = {id:1,name:"zhangxiaofan",sex:"male"};
//2 自己拼接JSON字符串
var userStr = '{"id":"1","name":"zhangxiaofan","sex":"male"}';
//3 JSON.stringify(data) JS方法序列化JSON對象
var userStr = JSON.stringify(user);
123456//1 將JSON字符串作為value值,后臺借助JSON解析工具
var userStr = '{"id":"1","name":"zhangxiaofan","sex":"male"}';
$.ajax({
type: "POST",
url: "/testAjax/addUser",
data: "user="+userStr ,
success:function(data){
//TODO
}
})
//后臺代碼
String json = request.getParameter("link");
JSONObject j = JSONObject.fromObject(json);
System.out.println(j.get("linkId"));
//2 結(jié)合SpringMvc的@RequestBody,@RequestBody需要把所有請求參數(shù)作為json解析,不能包含key=value這樣的寫法在請求url中,可以輕易的將一個對象或者數(shù)組傳到Java端,使用@RequestBody即可綁定到對象或者List/數(shù)組
//(1)對象
var user = {
id:1,
name:"zhangxiaofan",
sex:"male"
}
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8", //需要設(shè)置contentType
url: "/testAjax/addUser",
data: JSON.stringify(user) ,
success:function(data){
//TODO
}
})
//后臺
@RequestMapping(value = "/addUser")
public String addUser(HttpServletRequest request,@RequestBody User user) {
}
//(2)數(shù)組
var users=[];
var user1={id:1,name:tom,sex:cat};
var user2={id:2,name:tom2,sex:cat};
users.push(user1);
users.push(user2);
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8", //需要設(shè)置contentType
url: "/testAjax/addUser",
data: JSON.stringify(users) ,
success:function(data){
//TODO
}
})
//后臺
@RequestMapping(value = "/addUser")
public String addUser(HttpServletRequest request,@RequestBody List user) {
//上面也可以將List改為User[]數(shù)組
}