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(); // 实例化ObjectMapperUser 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(); // 实例化ObjectMapperUser user = jackson.readValue(formVal, User.class); // 将字符串转换成对象userDao.insert(user); // 添加一条信息}

form表单AJAX提交（四种方法）相关推荐

.form文件_含文件上传的form表单AJAX提交小结
最近在学习PHP时,遇到不知道如何含文件上传的form表单AJAX提交,现在把这些记录下来以备自己后续复习时用: HTML代码 *姓名: *性别: {eq name='list.sex' value= ...
html表单通过js提交表单提交,JavaScript动态创建form表单并提交的实现方法
本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 ...
$.ajaxSubmit form表单ajax提交
Form表单ajax提交 <style>#agreementSub{margin-top: 20px;display: block;width: 100px;height: 40px;te ...
layui form表单ajax提交
<form class="layui-form" method="post" action=""><div class=& ...
form表单AJAX提交
参考文章: http://blog.csdn.net/qq_28877125/article/details/75907422 http://blog.csdn.net/it_cookie_sam/a ...
TP5搭配layui2.x的form表单ajax提交
一般情况下,form表单提交是很难搭配ajax提交,同时ajax提示返回信息的,一般的用法是前端是用的form表单提交后端代码返回提示直接的$this->success或者$this-& ...
防止表单重复提交几种方法+实测
1.前端处理(场景:用于网络延迟情况下用户点击多次submit按钮导致表单重复提交) ①:通过一个标识来控制表单提交之后,再次提交会直接返回处理. Var isCommitted = false; / ...
form表单ajax提交 ac,請求Ajax 帶返回值的通用方法，自動獲取頁面控件值（form表單post方法提交），自動給控件賦值...
//自動獲取頁面控件值 function GetWebControls(element) { var reVal = ""; $(element).find('input,sele ...
form表单ajax提交json数据
前端页面: <form id="userInfo" ><div class="weui-cell"><div class=&quo ...

form表单AJAX提交（四种方法）

1、第一种: 序列化提交 $(’#form’).serialize()

2、第二种: 以对象形式传到后台 $(’#form’).serializeObject()

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

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

form表单AJAX提交（四种方法）相关推荐

最新文章

热门文章