form表單AJAX送出（四種方法）

一、AJAX的 form表單送出

1、第一種: 序列化送出 $(’#form’).serialize()

前台：

$.ajax({
	url: "",
	type: "post",
	dataType: "json",
	data: {
	    data : $('#form').serialize()
	},
	success: function (result) {
	}
})
           

背景：

可以用實體類接收（實體類參數必須大小寫嚴格一緻）。也可以把所有前台name傳值，挨個寫在參數裡面。

傳遞的參數形式為：name=1&pwd=2&email=3&phone=4

@ResponseBody
	@RequestMapping("/form")
	public Msg form(User user){
		userDao.insert(user); // 添加一條資訊
	}
           

2、第二種: 以對象形式傳到背景 $(’#form’).serializeObject()

前提，還要自己編寫一個方法，用于序列化表單傳輸：

//定義serializeObject方法，序列化表單
$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
}
           

前台：

JSON.stringify()的作用是将 JavaScript 對象轉換為 JSON 字元串

var form = $('#form').serializeObject();

$.ajax({
	url: "",
	type: "post",
	dataType: "json",
	data: {
	    data : JSON.stringify(form)
	},
	success: function (result) {
	}
})
           

背景：

這是一篇講解 ObjectMapper使用，jackson-databind，用于字元串和json、對象、集合互相轉換使用的。

@ResponseBody
	@RequestMapping("/data")
	public Msg form(String data){
		ObjectMapper jackson = new ObjectMapper(); // 執行個體化ObjectMapper
		User user = jackson.readValue(formVal, User.class); // 将字元串轉換成對象
		userDao.insert(user); // 添加一條資訊
	}
           

3、第三種: JSON.stringify($("#form").serializeJSON()

– -- 引入 jquery.serializejson.min.js

前台：

這是一篇講解 jquery.serializejson.min.js的妙用 轉json的一個非常簡單好用的插件。

$.ajax({
	url: "",
	type: "post",
	dataType: "json",
	data: {
	    data : JSON.stringify($("#form").serializeJSON()
	},
	success: function (result) {
	}
})
           

背景：

@ResponseBody
	@RequestMapping("/data")
	public Msg form(String data){
		ObjectMapper mapper = new ObjectMapper();
		@SuppressWarnings("unchecked")
		Map<String,String> map = mapper.readValue(data, Map.class);
		userDao.insert(user); // 添加一條資訊
	}
           

4、第四種: $(’#form’).getJsonData()

– 引入 jquery.serializeExtend-1.0.1.js

前台：

$.ajax({
	url: "",
	type: "post",
	dataType: "json",
	data: {
	    data : $('#form').getJsonData()
	},
	success: function (result) {
	}
})
           

背景：

@ResponseBody
	@RequestMapping("/data")
	public Msg form(String data){
		ObjectMapper jackson = new ObjectMapper(); // 執行個體化ObjectMapper
		User user = jackson.readValue(formVal, User.class); // 将字元串轉換成對象
		userDao.insert(user); // 添加一條資訊
	}