JavaScript--表单的序列化

一、关于表单序列化

在浏览器中使用Ajax向服务器提交表单的时候会对表单进行一个序列化的过程，也就是按照一定规则，利用表单字段的type属性，将name和value属性拼接成字符串发送给服务器。

二、表单提交的规则

• 对表单字段的名称和值进行URL编码，使用和号（&）分隔
• 对于禁用的表单字段默认执行不发送
• 对于复选框和单选按钮只发送选中的部分
• 不发送type为“reset”和“button”的按钮
• < select>元素的值就是选中< option>元素的value特性的值。如果< option>元素没有value特性，则是< option>元素的文本值

实现过程：

function serialize(form) {      if (!form || form.nodeName.toUpperCase() !== 'FORM') {        return;      }      var result = [];      var i, len;      var field, fieldName, fieldType;      for (i = 0, len = form.length; i < len; ++i) {        field = form.elements[i];        fieldName = field.name;        fieldType = field.type;        if (field.disabled || !fieldName) {          continue;        } // enf if        switch (fieldType) {          case 'text':          case 'password':          case 'hidden':          case 'textarea':            result.push(encodeURIComponent(fieldName) + '=' +                encodeURIComponent(field.value));            break;          case 'radio':          case 'checkbox':            if (field.checked) {              result.push(encodeURIComponent(fieldName) + '=' +                encodeURIComponent(field.value));            }            break;          case 'select-one':          case 'select-multiple':            for (var j = 0, jLen = field.options.length; j < jLen; ++j) {              if (field.options[j].selected) {                result.push(encodeURIComponent(fieldName) + '=' +                  encodeURIComponent(field.options[j].value || field.options[j].text));              }            } // end for            break;          case 'file':          case 'submit':            break;           default:            break;        } // end switch      } // end for        return result.join('&');    }

---

参考内容：
【1】JavaScript高级编程第三版