原⽣JS实现表单序列化serialize（）有⼀个form表单，要⽤AJAX后台提交，原来想拼接json，但是数据多了⿇烦，不灵活。
⽤HTML5的FormData来初始化表单
var formdata=new ElementById("advForm"));
看似还可以，但发现有两个问题，
⼀，()⽅法不知为什么⽤不了
⼆，Form Data 数据格式不如Jq的简洁，
WebKitFormBoundary29h06FRZequJgQtR
var stu={
name:"冷荣富",
age:22,
sex:"男"
};
$.ajax({
type : "POST",  //提交⽅式
url : "localhost/jsonTest.php",//路径,www根⽬录下
data : {
"student" : stu
},//数据，这⾥使⽤的是Json格式进⾏传输
success : function(result) {//返回数据根据结果进⾏相应的处理
alert(result);
}
});
这段JQ提交的数据是序列化的
⽹查如然不⽤我造轮⼦了，转⼀个可⽤的
使⽤原⽣的js模拟了表单序列化，代码中对表单处理尽可能地进⾏⽂字说明
其中对于url，字段名称，中⽂进⾏了使⽤了encodeURIComponent()进⾏编码。
Object.prototype.serialize = function(){
var res = [],  //存放结果的数组
current = null, //当前循环内的表单控件
i,  //表单NodeList的索引
len, //表单NodeList的长度
原生js和js的区别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;
pe){
//可忽略控件处理
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 :
}else{
//低版本IE需要使⽤特性的specified属性，检测是否已规定某个属性
optionValue = option.attributes('value').specified ? option.value : ;
}
}
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("&");
}
对HTML表单使⽤：
formElement.serialize();
得到类似如下结果：a=1&b=2&c=3&d=4&e=5

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。