ajax的序列化表单提交
2024-10-19 22:18:30
通过传统的 form 表单提交的方式上传文件
1
2
3
4
|
<form id= "uploadForm" action= "" method= "post" enctype= "multipart/form-data" > <p>上传文件:<input type = "file" name= "file" /></p> <input type= "submit" value= "上传" /> </form> |
不过传统的 form 表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用 Ajax 的方式进行请求的。
使用 serialize() 对 form 表单进行序列化提交
1
2
3
4
5
6
7
8
9
|
$.ajax({ url: "" , type: "POST" , data: $( '#uploadForm' ).serialize(), success: function (data) { }, error: function (data) { } }); |
如上,通过$('#uploadForm').serialize()可以对 form 表单进行序列化,从而将 form 表单中的所有参数传递到服务端。
但是上述方式,只能传递一般的参数,上传文件的文件流是无法被序列化并传递的。不过如今主流浏览器都开始支持一个叫做 FormData 的对象,有了这个对象就可以轻松地使用 Ajax 方式进行文件上传了。
使用 FormData 进行 Ajax 请求并上传文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<form id= "uploadForm" > <p>上传文件:<input type= "file" name= "file" /></p> <input type= "button" value= "上传" onclick= "upload()" /> </form> function upload() { var formData = new FormData($( "#uploadForm" )[0]); $.ajax({ url: '' , type: 'POST' , data: formData, async: false , cache: false , contentType: false , processData: false , success: function (data) { }, error: function (data) { } }); } |
最新文章
- Openfire 编译插件
- 把CMSampleBufferRef转成Data
- mac里git项目删除.DS_Store文件
- html5 调用摄像头
- 广告点击率 CTR预估中GBDT与LR融合方案
- WPFの单例模式
- Linux 新手非常有用的命令
- 流Stream个人学习理解
- 关于html页面图片自动撑开的问题
- Unity 4.2.0 官方最新破解版(Unity3D 最新破解版,3D游戏开发工具和游戏引擎套件)
- Swagger文档添加file上传参数写法
- Oracle添加记录的时候报错:违反完整性约束,未找到父项关键字
- 菜鸟VUER学习记——零0章、打开新的大门
- 使用Openresty加快网页速度
- Java开发知识之JavaIO操作缓存操作
- 点击按钮下载图片(ie,FF,chrome)
- bzoj千题计划323:bzoj1951: [Sdoi2010]古代猪文(Lucas+CRT+欧拉定理)
- dede织梦判断导航栏是否有子栏目
- CentOS 7 个性化配置指南
- 2017-2018-2 20155314《网络对抗技术》Exp1 PC平台逆向破解(5)M
热门文章
- JDK动态代理 Proxy InvocationHandler
- MySQL事务学习
- Jquery属性操作(入门二)
- ABP框架和NET CORE实战
- Joda-Time 的 DateTimeFormat 问题
- 各种安卓模拟器连接Adb
- watir 的api在线文档
- 洛谷-P3927 SAC E#1 - 一道中档题 Factorial
- 开机报错 the connected AC adapter has a lower wattage than the recommended model which was shipped with the system。
- springBoot jpa 表单关联查询