jquery使用FormData提交数据
在jquery中，使用ajax提交表单数据。
FormData可以很方便地获取到表单中的所有数据。
注意： ajax中的data参数为FormData类型时，contentType就不要设置成application/json了。
如果contentType设置成application/json，需要将FormData转换为json
示例如下：
<script type="text/javascript" >
$(document).ready( function () {
$("#commit").click(function () {
var form =new FormData($( "#form-user")[0] ); //通过id获取表单的数据
console.log("ajax");
$.ajax({
type:"POST", //请求的类型
url:"/user/test", //请求的路径
data: form , //请求的参数
async: false,
cache: false,
contentType: false,
processData: false,
success: function (msg) { //成功返回触发的方法
console.log("ajax请求成功")
},
//请求失败触发的方法
error:function(XMLHttpRequest, textStatus, errorThrown){
console.log("ajax请求失败");
console.log("请求对象XMLHttpRequest: "+XMLHttpRequest);
console.log("错误类型textStatus: "+textStatus);
console.log("异常对象errorThrown: "+errorThrown);
}
})
})
}
);
</script>
<body>
<form id="form-user">
账号：
<input type="text" name="userName"> <br>
年龄:
<input type="text" name="age"> <br>
vip :
是: <input type="checkbox" name="isVip" value="true">
否: <input type="checkbox" name="isVip" value="false"> <br>
生日：
<input type="date" name="birthday"> <br>
<button id="commit" >提交</button>
</form>
</body>
后台接收数据，如下：
/**
* 点击表单，获取formData后通过ajax跳转而来。
* @param user
* @return
*/
@RequestMapping(value = "/user/test",method = RequestMethod.POST )
public String getUserInfo( User user ,@RequestParam ("userName") String userName){
System.out.println(user.getUserName() +","+user.getAge()+","+user.getBirthday());
System.out.println("userName"+userName);
return "test";
}
参考资料 ：
https://blog.csdn.net/csdn2193714269/article/details/76269656
https://www.cnblogs.com/zhuxiaojie/p/4783939.html
jquery使用FormData提交数据的更多相关文章
- post请求中的参数形式和form-data提交数据时取不到的问题
@Controller页面form表单请求时不会丢数据返回json数据时需要加 注解@ResponseBody请求格式如下 @ResponseBody public Object login(Sign ...
- JQuery按回车提交数据
引入JQuery文件 <script src="JS/jquery-1.9.1.js" type="text/javascript"></sc ...
- element ui axios使用formdata提交数据
axios({ //formdata提交 headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, transformRequ ...
- iOS网络请求之multipart/form-data提交数据
multipart/form-data表单数据 在http网络请求中,post没有请求长度的限制,因为post把数据放在了body中,而不是像Get一样放在了浏览器的地址栏中(可以这么理解), 所以相 ...
- axios formData提交数据 && axios设置charset无效？？？
但是这样会出现一个问题,什么问题呢? 我设置了请求头编码utf-8,但是没生效 content-type里面没有出现utf-8???????查了很多资料,说这是axios固有的bug,我....... ...
- POST提交数据之---Content-Type的理解；
POST提交数据之---Content-Type的理解: Content-Type是指http/https发送信息至服务器时的内容编码类型,contentType用于表明发送数据流的类型,服务器根据编 ...
- POST提交数据之---Content-Type的理解
Content-Type是指http/https发送信息至服务器时的内容编码类型,contentType用于表明发送数据流的类型,服务器根据编码类型使用特定的解析方式,获取数据流中的数据. 在网络请求 ...
- vue+axios通过formdata提交参数和上传文件
demo.vue 文件 <template> <div class="demo"> <input v-model="importForm.m ...
- JQuery中使用FormData异步提交数据和提交文件
web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一 ...
随机推荐
- Yii框架中使用SRBAC作为权限管理模块时遇到的问题
Yii框架中使用SRBAC作为权限管理模块时遇到的问题 看到Yii中提供RBAC的插件,SRBAC,就想用用. 结果按照手册上的安装办法,整来整去,安装完了,可就是进不了权限管理界面. 最后想到, ...
- maven 插件2
Maven is - at its heart - a plugin execution framework; all work is done by plugins. Maven 本质上就是一个插件 ...
- C#的配置文件App.config使用总结
应用程序配置文件是标准的 XML 文件,XML 标记和属性是区分大小写的.它是可以按需要更改的,开发人员可以使用配置文件来更改设置,而不必重编译应用程序.配置文件的根节点是configuration. ...
- 开发MIS系统的相关技术
Java Web应用的核心技术包括以下几个方面:● JSP:进行输入和输出的基本手段.● JavaBean:完成功能的处理.● Servlet:对应用的流程进行控制.● JDBC:是与数据库进行交互不 ...
- Linux中的Wheel组的作用
原文:http://www.360doc.com/content/11/0505/10/4644186_114496525.shtml Linux中的Wheel组的作用(用自己的话翻译的) (原文) ...
- python_04 基本数据类型、数字、字符串、列表、元组、字典
基本数据类型 所有的方法(函数)都带括号,且括号内没带等号的参数需传给它一个值,带等号的参数相当于有默认值 1.数字 int 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1 ...
- 剑指offer例题——旋转数组的最小数字
题目:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转, ...
- Haskell语言学习笔记（81）Data.Typeable
Data.Typeable 利用 Data.Typeable,可以打印动态类型信息. class Typeable (a :: k) where typeRep# :: TypeRep a typeR ...
- linux下mysql开启远程访问权限 防火墙开放3306端口
linux下mysql开启远程访问权限 防火墙开放3306端口 转载 2017-01-21 作者:JAVA-ANDROID 这篇文章主要为大家详细介绍了linux下mysql开启远程访问权限,防 ...
- webpack打包avalon＋mmRouter
这是上一篇<webpack打包avalon+oniui+jquery>的姐妹篇,avalon 的高级应用篇.大家要知道,现在最流行的网页架构就是SPA,SPA能提高用户体验.用户许多数据都 ...