46.项目 1-博客前端：封装库--表单序列化

学习要点：

1.问题所在
2.设置代码

如果不采用传统的 form 提交数据，而采用 ajax 提交，就必须将表单的数据通过 ajax 传
递到服务器端，但每个表单都需要逐一编写显得有点麻烦。所以，我们采用表单序列化的方
法解决这一问题。

一．问题所在

使用表单序列化，可以解决多次表单获取键值对的功能。
表单序列化的几个要求：

1.不发送禁用的表单字段；

2.只发送勾选的复选框和单选按钮；

3.不发送 type 是 reset、submit、file 和 button 以及字段集；

4.多选选择框中的每个选中的值单独一个条目；

5.对于<select>，如果有 value 值，就指定为 value 作为发送的值。如果没有，就指定 text 值。

二．设置代码

JS 代码

//表单序列化
$().extend('serialize', function () {
for (var i = 0; i < this.elements.length; i ++) {
var parts = {};
var field = null;
var form = this.elements[i];
for (var i = 0; i < form.elements.length; i ++) {
field = form.elements[i];
switch (field.type) {
case 'select-one' :
case 'select-multiple' :
for (var j = 0; j < field.options.length; j++) {
var option = field.options[j];
if (option.selected) {
var optValue = '';
if (option.hasAttribute) {
optValue = (option.hasAttribute('value') ?
option.value : option.text);
} else {
optValue = (option.attributes['value'].specified ?
option.value :
option.text);
}
parts[field.name] = optValue;
}
}
break;
case undefined :
case 'file' :
case 'submit' :
case 'reset' :
case 'button' :
break;
case 'radio' :
case 'checkbox' :
if (!field.checked) {
break;
}
default :
parts[field.name] = field.value;
}
}
return parts;
}
return this;
});

感谢收看本次教程！