十年专注于品牌网站建设 十年专注于品牌网站建设,低调、高逼格、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

如何实现表单序列化及表单序列化操作实例代码

百恒网络 2017-02-21 557

随着 Ajax的出现,表单序列化已经成为一种常见需求。在 JavaScript中,可 以利用表单字段的 type 属性,连同 name 和 value 属性一起实现对表单的序列化。在编写代码之前, 有必须先搞清楚在表单提交期间,浏览器是怎样将数据发送给服务器的。
        ◎对表单字段的名称和值进行 URL编码,使用和号(&)分隔。 
        ◎不发送禁用的表单字段。
        ◎只发送勾选的复选框和单选按钮。
        ◎不发送 type 为"reset"和"button"的按钮。
        ◎多选选择框中的每个选中的值单独一个条目。
        ◎在单击提交按钮提交表单的情况下,也会发送提交按钮;否则,不发送提交按钮。也包括 type 为"image"的<input>元素。
        ◎<select>元素的值,就是选中的<option>元素的 value 特性的值。如果<option>元素没有 value 特性,则是<option>元素的文本值。 
       在表单序列化过程中,一般不包含任何按钮字段,因为结果字符串很可能是通过其他方式提交的。 除此之外的其他上述规则都应该遵循。接下来南昌网络公司百恒网络前端开发工程师介绍实现表单序列化的代码。 
<!DOCTYPE html>
<html>
<head>
       <title>Form Serialization Example</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<form method="post" action="javascript:alert('Form submitted!')" id="myForm">
       <ul>
              <li><input type="radio" name="color" value="red">Red</li>
              <li><input type="radio" name="color" value="green">Green</li>
              <li><input type="radio" name="color" value="blue">Blue</li>
       </ul>
<fieldset>
       <legend>Locations</legend>
<div>
       <label for="selLocation">Where do you want to live?</label>
       <select name="location" id="selLocation">
              <option value="Sunnyvale, CA">Sunnyvale</option>
              <option value="Los Angeles, CA">Los Angeles</option>
              <option value="Mountain View, CA">Mountain View</option>
              <option value="">China</option>
              <option>Australia</option>
       </select>
</div>
<div>
       <label for="selLocation2">Where do you want to work?</label>
       <select name="location2" id="selLocation2" multiple size="5">
              <option value="Sunnyvale, CA">Sunnyvale</option>
              <option value="Los Angeles, CA">Los Angeles</option>
              <option value="Mountain View, CA">Mountain View</option>
              <option value="">China</option>
              <option>Australia</option>
       </select>
</div>
</fieldset>
<div>
       <label for="comments">Any other comments?</label><br>
              <textarea rows="10" cols="50" id="comments" name="comments"></textarea>
</div>
       <input type="button" value="Serialize Form" id="serialize-btn">
</form> 
<script type="text/javascript">
function serialize(form){ 
       var parts = [],
       field = null,
       i,
       len,
       j,
       optLen,
       option,
       optValue;

for (i=0, len=form.elements.length; i < len; i++){
       field = form.elements[i];

       switch(field.type){
              case "select-one":
              case "select-multiple":

       if (field.name.length){
              for (j=0, optLen = field.options.length; j < optLen; j++){
                     option = field.options[j];
              if (option.selected){
                     optValue = "";
              if (option.hasAttribute){
                     optValue = (option.hasAttribute("value") ? option.value : option.text);
              } else {
                     optValue = (option.attributes["value"].specified ? option.value : option.text);
              }
                     parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
       }
       }
}
       break;

              case undefined: //fieldset
              case "file": //file input
              case "submit": //submit button
              case "reset": //reset button
              case "button": //custom button
       break;

       case "radio": //radio button
       case "checkbox": //checkbox
       if (!field.checked){
       break;
}
/* falls through */

       default:
       //don't include form fields without names
       if (field.name.length){
              parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
       }              
       }

       return parts.join("&");
}

       var btn = document.getElementById("serialize-btn");
              EventUtil.addHandler(btn, "click", function(event){
              var form = document.forms[0];
              alert(serialize(form));
       });
        </script>
</body>
</html>
       上面这个 serialize()函数首先定义了一个名为 parts 的数组,用于保存将要创建的字符串的各 个部分。然后,通过 for 循环迭代每个表单字段,并将其保存在 field 变量中。在获得了一个字段的 引用之后,使用 switch 语句检测其 type 属性。序列化过程中麻烦的就是<select>元素,它可能 是单选框也可能是多选框。为此,需要遍历控件中的每一个选项,并在相应选项被选中的情况下向数组 中添加一个值。对于单选框,只可能有一个选中项,而多选框则可能有零或多个选中项。这里的代码适 用于这两种选择框,至于可选项的数量则是由浏览器控制的。在找到一个选中项之后,需要确定使用什 么值。如果不存在 value 特性,或者虽然存在该特性,但值为空字符串,都要使用选项的文本来代替。 为检查这个特性,在 DOM 兼容的浏览器中需要使用 hasAttribute()方法,而在 IE 中需要使用特性 的 specified 属性。 
       如果表单中包含<fieldset>元素,则该元素会出现在元素集合中,但没有 type 属性。因此,如果 type 属性未定义,则不需要对其进行序列化。同样,对于各种按钮以及文件输入字段也是如此(文件输入字段在 表单提交过程中包含文件的内容;但是,这个字段是无法模仿的,序列化时一般都要忽略)。对于单选按钮 和复选框,要检查其 checked 属性是否被设置为 false,如果是则退出 switch 语句。如果 checked 属性
为true,则继续执行 default 语句,即将当前字段的名称和值进行编码,然后添加到 parts 数组中。函数 的后一步,就是使用 join()格式化整个字符串,也就是用和号来分隔每一个表单字段。 
       最后,serialize()函数会以查询字符串的格式输出序列化之后的字符串。当然,要序列化成其他 格式,也不是什么困难的事。 

   本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络 http://www.jxbh.cn/ 如转载请注明出处!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×