表单序列化与get，post请求

电玩女神 2022-07-20 12:18 171阅读 0赞

表单序列化

随着Ajax的出现，表单序列化已经成为一种常见需求。在JS中，可以利用表单字段的type属性，连同name和value属性一起实现对表单的序列化。在编写代码前，先了解一下表单提交期间，浏览器是怎么样将数据发送给服务器的；

**1.对表单字段的名称和值进行URL编码，使用和号(&)分割。**

**2.不发送禁用的表单字段**

**3.只发送勾选的复选框和单选按钮。**

**4.不发送type为"reset"和"button"的按钮。**

**5.多选选择框中的每个选中的值单独一个条目。**

**6.在单击提交按钮提交表单的情况下，也会发生提交按钮；否则，不发送提交按钮。也包括type为"image"的<input>元素。**

**7.<select>元素的值，就是选中的<option>元素的value特性的值。如果<option>元素没有value特性，则是<option>元素的文本值。**

在表单序列化的过程中，一般不包含任何按钮字段，因为结果字符串可能是通过其他方式提交的。除此之外的其他上述规则都应该遵循，下面是表单序列化的代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML =01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
     </head>
     <body >
    	<form id="form1">
    		loginNo<input type="text" name="loginNo"></input><br>
    		password<input type="password" name="password"></input><br>
    		<button type="button" οnclick="submitCk()">submit</button>
    	</form>
     </body>
    <script>
    	function submitCk(){
    		var form=document.getElementById("form1");
    		alert(serialize(form));
    	}
    	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:  //字段集
    				case "file":  //文件输入
    				case "submit": //提交按钮
    				case "reset": //重置按钮
    				case "button": //自定义按钮
    				break;
    				case "radio":  //单选按钮
    				case "checkbox":  //复选框
    				if(!field.checked){
    				break;
    				}
    				/*执行默认操作*/
    				default:
    				//不包含没有名字的表单字段
    				if(field.name.length){
    					parts.push(encodeURIComponent(field.name)+"="+
    					encodeURIComponent(field.value));
    				}
    			}
    		}
    		return parts.join("&");
    	}
    </script>
    </html>

上面这个serialize()函数首先定义了名为parts的数组，用于保存将要创建的字符串的各个部分。然后，通过for循环迭代每个表单字段，并将其保存在field变量中。在获得了一个字段的引用之后，使用switch语句检测其type属性。序列化过程中最麻烦的就是<select>元素，它可能是单选框也是多选框。因此需要遍历每一个选项，并在对应的数组中添加一个值。对于表单中的"file"，“submit"等属性则不需要序列化。执行default的时候，即将当前字段的名称和值进行编码，然后添加到parts数组中，函数的最后一步是使用join格式化整个字符串；

get请求和post请求的区别?

(1).首先是"GET方式提交的数据最多只能是1024字节"，因为GET是通过URL提交数据，那么GET可提交的数据量就跟URL的长度有直接关系了。而实际上，URL不存在参数上限的问题，HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。

注意这是限制是整个URL长度，而不仅仅是你的参数值数据长度。\[见参考资料5\]

(2).理论上讲，POST是没有大小限制的，HTTP协议规范也没有进行大小限制，说“POST数据量存在80K/100K的大小限制”是不准确的，POST数据是没有限制的，起限制作用的是服务器的处理程序的处理能力。

对于ASP程序，Request对象处理每个表单域时存在100K的数据长度限制。但如果使用Request.BinaryRead则没有这个限制。

由这个延伸出去，对于IIS 6.0，微软出于安全考虑，加大了限制。我们还需要注意：

1).IIS 6.0默认ASP POST数据量最大为200KB，每个表单域限制是100KB。  
　　　　 2).IIS 6.0默认上传文件的最大大小是4MB。  
　　　　 3).IIS 6.0默认最大请求头是16KB。  
　　IIS 6.0之前没有这些限制。\[见参考资料5\]

所以上面的80K，100K可能只是默认值而已(注：关于IIS4和IIS5的参数，我还没有确认)，但肯定是可以自己设置的。由于每个版本的IIS对这些参数的默认值都不一样，具体请参考相关的IIS配置文档。

**3**.在ASP中，服务端获取GET请求参数用Request.QueryString，获取POST请求参数用Request.Form。在JSP中，用request.getParameter(\\"XXXX\\")来获取，虽然jsp中也有request.getQueryString()方法，但使用起来比较麻烦，比如：传一个test.jsp?name=hyddd&password=hyddd，用request.getQueryString()得到的是：name=hyddd&password=hyddd。在PHP中，可以用$\_GET和$\_POST分别获取GET和POST中的数据，而$\_REQUEST则可以获取GET和POST两种请求中的数据。值得注意的是，JSP中使用request和PHP中使用$\_REQUEST都会有隐患，这个下次再写个文章总结。

**4**.POST的安全性要比GET的安全性高。注意：这里所说的安全性和上面GET提到的“安全”不是同个概念。上面“安全”的含义仅仅是不作数据修改，而这里安全的含义是真正的Security的含义，比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录页面有可能被浏览器缓存，(2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了，除此之外，使用GET提交数据还可能会造成Cross-site request forgery攻击。

总结一下，Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求，在FORM（表单）中，Method默认为"GET"，实质上，GET和POST只是发送机制不同，并不是一个取一个发！