JavaWeb开发$.ajax如何向后台传输数据

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

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

public class User{    private Interger id;    private String name;    private String sex;}

---

一、简单的数据格式

---

$.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    } })

针对以上方式，后台数据的获取（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");    }}

---

二、复杂的数据格式

---

复杂的数据一般采用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);

//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 List<User> user) {    //上面也可以将List<User>改为User[]数组    }