form表单中的get和post的区别

一入前端深似海，除了搭建页面，渲染数据，所以免不了提交form表单，但是通常我们会遇到2种提交方式，get和post,今天就来简单总结一下。

一、get和post定义

form元素的method属性用来指定发送form的http方法；

使用get时，form数据集被附加到form元素的action属性所指定的URL后面；

使用post时，form数据集被包装在请求的body中并被发送。

使用get提交方式，生成URL：userName.dowhat?loginId=abc

get仅仅是拼接一个URL，然后直接向服务区请求数据，需要提交给服务器的数据集包含在URL中。

使用post提交方式，生成URL：userName.dowhat

post会把form的数据集，即loginId=abc这个键值对包装在请求的body中，发给服务器，然后向服务器请求数据。

二、get和Post的区别

1、安全性

如果用get提交一个验证用户名和密码的form，一般认为是不安全的，因为用户名和密码将出现在URL上，进而出现在浏览器的历史记录中。

显然，在对安全性有要求的情况下，应该使用post。

2、编码

get只能向服务器发送ASCII字符，而post则可以发送整个ISO 10646中的字符。

get和post对应的enctype属性有区别。enctype有两个值，默认值为application/x-www-form-urlencoded(在发送前编码所以的字符)

另外一个就是multipart/form-data(用于文件上传)只能用post,比如常见的上传照片这些功能；

3.提交数据的长度。

IE将请求的URL长度限制为2083个字符，从而限制了get提交的数据长度，如果URL超出了这个限制，提交form时IE不会有任何反映。

4、缓存

由于一个get得到的结果直接对应到一个URL，所以get的结果页面有可能被浏览器缓存，而post一般不能。

5、引用和SEO 
可以用一个URI引用一个get的结果页面，而post的结果则不能，所以必然不能被搜索引擎搜到。

最本质的区别：

1、Get是用来从服务器上获得数据，而post是用来向服务器上传递数据

如果采用Post方法，浏览器将会按照下面两步来发送数据。

首先浏览器将action属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。

在服务器端，一旦Post样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码，用户特定的服务器会明确指定应用程序应该如何接受这些参数。

采用Get方法：

浏览器会直接与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据，然后直接在一个传输步骤中发送所有的表单数据。

2、Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。

三、正确的使用get和post 
当且仅当form是幂等的时候，使用get。 
幂等：多次相同的请求产生的副作用，和一次请求的副作用相同。 

如果提交请求纯粹只是从服务器端获取数据而不是进行其他操作，并且多次提交不会有明显的副作用，应该使用get。 
比如：搜索引擎的查询(http://www.google.com/search?q=abc)和分页(user.do?page=1)

如果提交这个请求会产生其他操作和影响，就应该使用post。 
比如：修改服务器上数据库中的数据；发送一封邮件；删除一个文件等
另一个要考虑因素是安全性。

若符合下列任一情况，则用post方法： 
a.请求的结果有持续性的副作用，例如：数据库内添加新的数据行。 
b.若使用get方法，则表单上收集的数据可能让URL过长。 
c.要传送的数据不是采用ASCII编码。 

若符合下列任一情况，则用get方法： 
a.请求是为了查找资源，html表单数据仅用来搜索。 
b.请求结果无持续性的副作用。 
c.收集的数据及html表单内的输入字段名称的总长不超过1024个字符。 

四、浏览器差异 
IE6:URL长度限制为2083个字符；post之后，刷新页面不会自动重新post数据，会出现警告。 
IE7和IE6相同。 
Firefox：刷新页面不会自动重新post数据会出现警告。

post和get容易忽视的一点差别：

就是当method为get时，action属性中URL后面的参数是忽视的。