jquery
serializeArray()
var data = $("#updateChannelForm").serializeArray();
例如我想添加sex="男"
dataParam.push({"name":"sex","value":"男"});
serialize()
var data = $form.serialize()
//添加键值对
$form.serialize()+'&'+$.param({content:content})
html5中的FormData
var data = new FormData($("#subForm")[0]);
//添加键值对 ,第三个参数是可选的
FormData.append(name, value, filename);
使用formData序列化数据作为jquery发送Ajax时记得jquery下面三个选项要加上
cache: false,
processData: false,
contentType: false,
cache
设置为false,上传文件不需要缓存。
processData
参数,根据jQuery.ajax()文档中的解释,默认情况下,jQuery会处理发送的数据,将数据按照’application/x-www-form-urlencoded’的要求转换为查询字符串,如果要发送的数据是DOMDocument或者不需要处理,就可以设置为false不让jQuery转换数据,我们这里要发送的数据其实就是DOMDocument。
contentType
设置为false。因为是由form表单构造的FormData对象,且已经声明了属性enctype="mutipart/form-data",所以这里设置为false。
自己用原生js封装
Object.prototype.serialize = function(){
var res = [], //存放结果的数组
current = null, //当前循环内的表单控件
i, //表单NodeList的索引
len, //表单NodeList的长度
k, //select遍历索引
optionLen, //select遍历索引
option, //select循环体内option
optionValue, //select的value
form = this; //用form变量拿到当前的表单,易于辨识
for(i=0, len=form.elements.length; i<len; i++){
current = form.elements[i];
//disabled表示字段禁用,需要区分与readonly的区别
if(current.disabled) continue;
switch(current.type){
//可忽略控件处理
case "file": //文件输入类型
case "submit": //提交按钮
case "button": //一般按钮
case "image": //图像形式的提交按钮
case "reset": //重置按钮
case undefined: //未定义
break;
//select控件
case "select-one":
case "select-multiple":
if(current.name && current.name.length){
console.log(current)
for(k=0, optionLen=current.options.length; k<optionLen; k++){
option = current.options[k];
optionValue = "";
if(option.selected){
if(option.hasAttribute){
optionValue = option.hasAttribute('value') ? option.value : option.text
}else{
//低版本IE需要使用特性 的specified属性,检测是否已规定某个属性
optionValue = option.attributes('value').specified ? option.value : option.text;
}
}
res.push(encodeURIComponent(current.name) + "=" + encodeURIComponent(optionValue));
}
}
break;
//单选,复选框
case "radio":
case "checkbox":
//这里有个取巧 的写法,这里的判断是跟下面的default相互对应。
//如果放在其他地方,则需要额外的判断取值
if(!current.checked) break;
default:
//一般表单控件处理
if(current.name && current.name.length){
res.push(encodeURIComponent(current.name) + "=" + encodeURIComponent(current.value));
}
}
}
return res.join("&");
}
使用
formElement.serialize();
得到类似如下结果:a=1&b=2&c=3&d=4&e=5