ajax获取java后台数据_JavaWeb开发$.ajax如何向后台传输数据

在Web开发中，前台和后台的数据交互是十分频繁的， 而JQuery对Ajax进行了封装，使得前台向后台发送数据变得十分简单。

假如后台有一个Java类User，来接收并封装数据

public class User{

private Interger id;

private String name;

private String sex;

}12345

一、简单的数据格式

$.ajax发送数据的几种形式

//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

针对以上方式，后台数据的获取(SpringMvc框架)

@RequestMapping(value = "/testAjax")

public class UserController{

// 1 将User放到参数中，框架进行封装

@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

二、复杂的数据格式

复杂的数据一般采用JSON格式来传输，并且Java对JSON格式的数据也都有很好的支持，如JSON-lib的JSONArray和JSONObject、jackson等技术。

注意： 前后台传输的JSON数据一般是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 结合SpringMvc的@RequestBody，@RequestBody需要把所有请求参数作为json解析,不能包含key=value这样的写法在请求url中,可以轻易的将一个对象或者数组传到Java端，使用@RequestBody即可绑定到对象或者List/数组

//(1)对象

var user = {

id:1,

name:"zhangxiaofan",

sex:"male"

}

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8", //需要设置contentType

url: "/testAjax/addUser",

data: JSON.stringify(user) ,

success:function(data){

//TODO

}

})

//后台

@RequestMapping(value = "/addUser")

public String addUser(HttpServletRequest request,@RequestBody User user) {

}

//(2)数组

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", //需要设置contentType

url: "/testAjax/addUser",

data: JSON.stringify(users) ,

success:function(data){

//TODO

}

})

//后台

@RequestMapping(value = "/addUser")

public String addUser(HttpServletRequest request,@RequestBody Listuser) {

//上面也可以将List改为User[]数组

}