ajax的序列化表单提交
通过传统的 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) { } }); } |
ajax的序列化表单提交的更多相关文章
- DWZ框架Ajax无刷新表单提交处理流程
DWZ框架Ajax无刷新表单提交处理流程是: 1. ajax表单提交给服务器 2. 服务器返回一个固定格式json结构 3. js会调函数根据这个json数据做相应 ...
- 关于AJAX与form表单提交数据的格式
一 form表单传输文件的格式: 只有三种: multipart/form-data 一般用于传输文件,图片文件或者其他的. 那么其中我们默认的是application/x-www-form-urle ...
- AJAX 实现form表单提交
1.使用Ajax实现异步操作,点击登录按钮后,即触发form表单的提交事件,数据传输至后端 JSP: <script type="text/javascript" src=& ...
- Ajax模拟Form表单提交,含多种数据上传
---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...
- ajax post方式表单提交的注意事项。
当我们创建一个异步对象XMLHttpRequest同时post方式向后台传输数据的时候. 我们要设置异步对象的xhr.setRequestHeader成员的值为 XMLHttpRequest.setR ...
- ajax 将整个表单提交到后台处理
$(document).on('click', '.user-save-btn', function () { $.ajax({ url: 'index', type: 'post', dataTyp ...
- ajax默认form表单提交,导致实体不识别
出现位置:实体比较复杂,包含List之类的时候 public class AdvertisementType { /// <summary> /// 广告位名称 /// </summ ...
- jQuery异步表单提交
有时在A页面点击按钮弹出一个form表单,在填完表单后提交成功后,需要关闭表单页并将表单中的某些值反应在A页面上,这时就需要异步提交表单.其实也挺简单,只是需要把表单数据序列化. $("#f ...
- js_ajax模拟form表单提交_多文件上传_支持单个删除
需求场景: 用一个input type="file"按钮上传多张图片,可多次上传,可单独删除,最后使用ajax模拟form表单提交功能提交到指定方法中: 问题:由于只有一个file ...
随机推荐
- offsetLeft在各浏览器的值
上网找了好久没有找到一个offsetLeft在各浏览器的值,自己用了一晚上的时间在各浏览器测试出来的offsetLeft的值. <!DOCTYPE html> <html lang= ...
- uoj#279. 【UTR #2】题目交流通道(容斥+数数)
传送门 先考虑无解的情况,为以下几种:\(dis_{i,j}+dis_{j,k}<dis_{i,k}\),\(dis_{i,i}\neq 0\),\(dis_{i,j}\neq dis_{j,i ...
- JDK12下的ArrayList源码解读 与 Vector的对比
ArrayList源码阅读. //测试代码实现如下 private static void arrayList() { ArrayList<String> list = new Array ...
- 洛谷P3831 回家的路
题目背景 SHOI2012 D2T1 题目描述 \(2046\) 年 \(OI\) 城的城市轨道交通建设终于全部竣工,由于前期规划周密,建成后的轨道交通网络由\(2n\)条地铁线路构成,组成了一个\( ...
- JavaScript进阶 - 第7章 JavaScript内置对象
第7章 JavaScript内置对象 7-1 什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的, ...
- JavaScript进阶 - 第4章 跟着我的节奏走(流程控制语句)
第4章 跟着我的节奏走(流程控制语句) 4-1 做判断(if语句) if语句是基于条件成立才执行相应代码时使用的语句. 语法: if(条件) { 条件成立时执行代码} 注意:if小写,大写字母(IF) ...
- CodeForces - 500A-New Year Transportation(模拟)
New Year is coming in Line World! In this world, there are n cells numbered by integers from 1 to n, ...
- Net Core微服务
Net Core微服务 http://www.cnblogs.com/qhbm/category/1235971.html 开发工具:VS2017 .Net Core 2.1 什么是微服务? 单体结构 ...
- Codeforces Round #378 (Div. 2) D. Kostya the Sculptor 分组 + 贪心
http://codeforces.com/contest/733/problem/D 给定n个长方体,然后每个长方体都能选择任何一个面,去和其他长方体接在一起,也可以自己一个,要求使得新的长方体的最 ...
- 《javascript设计模式》笔记之第八章:桥接模式
个人理解:桥接模式就是更进一步地封装已有api,通过这个封装连接你的输入和底层api(初步理解,以后加深理解有不同体会之后可能要修改) 一:示例:事件监听器 下面这个示例就演示了通过一座桥(也就是一个 ...