关于serialize() FormData serializeArray()表单序列化
serialize() FormData serializeArray()都是序列化表单,实现表单的异步提交
但是serialize()和serializeArray()都是只能序列化表单中的数据,比如input select等的数据,但是对于文件上传就只能用 FormData。
html代码
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" name='firstname' class="form-control" id="firstname"
placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="text" name="lastname" class="form-control" id="lastname"
placeholder="请输入姓">
</div>
</div> <div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default">登录</button>
</div>
</div>
</form>
formdata看代码
$('.btn-default').click(function () {
var formData = new FormData();
formData.append("firstname", $('#firstname').val());
formData.append("lastname", $('#lastname').val()); $.ajax({
headers: {
Accept: "application/json; charset=utf-8"//设置headers里的accept
},
type: 'POST',
data: formData,
url: 'wwww',
processData: false,
contentType: false,
async: false,
success: function (data) {
if (typeof (data) == undefined) {
alert("用户信息已丢失,请重新登录!");
}
if (data.ErrorMsg == "") {
alert('美文发布成功!');
} else {
alert(data.ErrorMsg);
}
}
}); });
提交后显示结果
serialize()看代码
$('.btn-default').click(function () { var formData=$("form").serialize();//序列化表单
$.ajax({
headers: {
Accept: "application/json; charset=utf-8"//设置headers里的accept
},
type: 'POST',
data: formData,
url: 'wwww',
processData: false,
contentType: false,
async: false,
success: function (data) {
if (typeof (data) == undefined) {
alert("用户信息已丢失,请重新登录!");
}
if (data.ErrorMsg == "") {
alert('美文发布成功!');
} else {
alert(data.ErrorMsg);
}
}
}); });
显示结果
serializeArray()看代码
$('.btn-default').click(function () { var formData=$("form").serializeArray();//序列化表单json
console.log(formData);//打印出数据
$.ajax({
headers: {
Accept: "application/json; charset=utf-8"//设置headers里的accept
},
type: 'POST',
data: formData,
url: 'wwww',
processData: false,
contentType: false,
async: false,
success: function (data) {
if (typeof (data) == undefined) {
alert("用户信息已丢失,请重新登录!");
}
if (data.ErrorMsg == "") {
alert('美文发布成功!');
} else {
alert(data.ErrorMsg);
}
}
}); });
显示结果
关于serialize() FormData serializeArray()表单序列化的更多相关文章
- js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么
js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么 一.总结 一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...
- 原生JS实现表单序列化serialize()
有一个form表单,要用AJAX后台提交,原来想拼接json,但是数据多了麻烦,不灵活. 用HTML5的FormData来初始化表单 var formdata=new FormData(documen ...
- (转)jquery serialize表单序列化,当radio或checkbox 未选中时,没有序列化到对象中的原因分析和解决方案 - ghostsf
相信很多人都用过jq的表单序列化serialize()方法,因为这能很方便地帮你把表单里所有的非禁用输入控件序列化为 key/value 对象,不需要你再去一个个地拼接参数了. 这是一个很好用的函数, ...
- ajax提交表单序列化(serialize())数据
知识点: $("#form").serialize();将表单数据序列化为标准URL编码文本字符串(key1=value1&key2=value2…). 以下用一个例子来演 ...
- 原生js表单序列化----- FormData
<style type="text/css"> .progress{ height: 10px; width: 600px; border: 1px solid red ...
- 原生js实现form表单序列化
当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...
- jQuery实现form表单序列化转换为json对象功能示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Jquery表单序列化和AJAX全局事件
Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...
- $.ajax、$.post、from表单序列化工具
$.ajax\$.post <script type="text/javascript" language="javascript" src=" ...
随机推荐
- PhpStorm中terminal窗口字体修改
在PhpStorm–File–Settings–Tools–Terminal中可以看到terminal调用的系统的cmd.exe程序 因此需要做的就是修改系统的cmd.exe中的字体,如下: CMD命 ...
- STL中的unique()和lower_bound ,upper_bound
unique(): 作用:unique()的作用是去掉容器中相邻元素的重复元素(数组可以是无序的,比如数组可以不是按从小到大或者从大到小的排列方式) 使用方法:unique(初始地址,末地址): 这里 ...
- ECMAScript 5 新增的Array方法
引自:by zhangxinxu from http://www.zhangxinxu.com ES5中新增了写数组方法,如下: forEach (js v1.6) map (js v1.6) fil ...
- LINUX运行级别的原理
在目录 /etc/rc.d/init.d 下有许多服务器脚本程序,一般称为服务(service), 在 /etc/rc.d 下有 7 个名为 rcN.d 的目录,其中 N=0-6,对应于系统的 7 个 ...
- golang中函数类型
今天看Martini文档,其功能列表提到完全兼容http.HandlerFunc接口,就去查阅了Go: net/http的文档,看到type HandlerFunc这部分,顿时蒙圈了.由于之前学习的时 ...
- odoo 8.0 多核启用
对于很多企业来说,随着时间的推移,用户量或者企业建点扩张,使用erp就会出现应用访问越来越慢的情况, 其实这种情况不但限于erp,只要是有数据量增长的互联网业务必然会遇到的,因为一开始的是就没有做好大 ...
- leetcode 492-543 easy
492. Construct the Rectangle Input: 4 Output: [2, 2] Explanation: The target area is 4, and all the ...
- ECMAScript 6 (浅显入门)
1.let:ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为unde ...
- linux追加中文字库,解决imagemagick 中文乱码的问题。
Windows下的字体丰富多样,而且显示的工整.漂亮. 所以自己想把windows上的字体移到Ubuntu下来.Windows下字体库的位置为C:\Windows\fonts,这里面包含所有windo ...
- 基于LSTM对西储大学轴承故障进行分析
这篇文章是小萌新对西储大学轴承故障进行分析,固定特征为故障直径为0.007,电机转速为1797,12k驱动端故障数据(Drive_End)即DE-time.故障类型y值:滚动体故障,内圈故障,3时,6 ...