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); // 添加一条信息
	}
  • 10
    点赞
  • 53
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小心仔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值