在Web开发中,前台和后台的数据交互是十分频繁的, 而JQuery对Ajax进行了封装,使得前台向后台发送数据变得十分简单。
假如后台有一个Java类User,来接收并封装数据
public class User{
private Interger id;
private String name;
private String sex;
}
一、简单的数据格式
$.ajax发送数据的几种形式
$.ajax({
type: "POST",
url: "/testAjax/addUser?id=1&name=zhangxiaofan&sex=male",
success:function(data){
}
})
var formData = $("#form").serialize();
$.ajax({
type: "POST",
url: "/testAjax/addUser",
data: formData,
success:function(data){
}
})
var formData = $("#form").serialize();
$.ajax({
type: "POST",
url: "/testAjax/addUser",
data: "id=1&name=zhangxiaofan&sex=male",
success:function(data){
}
})
var userData = {
id:1,
name:zhangxiaofan,
sex:male
}
$.ajax({
type: "POST",
url: "/testAjax/addUser",
data: userData,
success:function(data){
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
针对以上方式,后台数据的获取(SpringMvc框架)
@RequestMapping(value = "/testAjax")
public class UserController{
@RequestMapping(value = "/addUser")
public String addUser(User user) {
}
@RequestMapping(value = "/addUser")
public String addUser(HttpServletRequest request) {
String id = request.getParameter("id");
String name = request.getParameter("name");
String sex= request.getParameter("sex");
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
二、复杂的数据格式
复杂的数据一般采用JSON格式来传输,并且Java对JSON格式的数据也都有很好的支持,如JSON-lib的JSONArray和JSONObject、jackson等技术。
注意: 前后台传输的JSON数据一般是JSON对象序列化的字符串,而不是直接传递JSON对象。
var user = {id:1,name:"zhangxiaofan",sex:"male"};
var userStr = '{"id":"1","name":"zhangxiaofan","sex":"male"}';
var userStr = JSON.stringify(user);
var userStr = '{"id":"1","name":"zhangxiaofan","sex":"male"}';
$.ajax({
type: "POST",
url: "/testAjax/addUser",
data: "user="+userStr ,
success:function(data){
}
})
String json = request.getParameter("link");
JSONObject j = JSONObject.fromObject(json);
System.out.println(j.get("linkId"));
var user = {
id:1,
name:"zhangxiaofan",
sex:"male"
}
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/testAjax/addUser",
data: JSON.stringify(user) ,
success:function(data){
}
})
@RequestMapping(value = "/addUser")
public String addUser(HttpServletRequest request,@RequestBody User user) {
}
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",
url: "/testAjax/addUser",
data: JSON.stringify(users) ,
success:function(data){
}
})
@RequestMapping(value = "/addUser")
public String addUser(HttpServletRequest request,@RequestBody List<User> user) {
}