JavaScript表单提交

JavaScript表单提交

开发工具与关键技术：Visual Studio 2015 与 JavaScript
撰写时间：2020年4月30日

form表单的属性action 与method
属性 值 描述
action URL 规定当提交表单时向何处发送表单数据
method get/post 规定用于发送form-data的HTTP方法。(提交表单的方式)

URL可能的值：
绝对 URL - 指向其他站点（比如 src=“www.baidu.com”）
相对 URL - 指向站点内的文件（比如 src="/Form00/getData"）

method的值 get/post
get提交时参数直接暴露在URL上。
(W3School上给出的区别：)
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
1.无法使用缓存文件（更新服务器上的文件或数据库）
2.向服务器发送大量数据（POST 没有数据量限制）
3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
get/post区别：
1.GET方法是用来向服务器上获取数据，而PSOT是用来向服务器上传递修改数据。
2.GET将表单里的数据添加到action所指向的URL后面，并且两者之间使用”?”连接
而各个变量之间使用"&"连接;PSOT是将表单中的数据放在form的数据体(FormData)中，按照键值对的方式，传递到所指向的action
3.GET是不安全的，因为在传输过程中，数据被放在请求的url中这样用户可以直接在浏览器上看到提交的数据， POST的所有操作对用户来说都是不可见的,数据都在数据体(FormData)中
4.GET方法向URL添加数据,URL的长度是受限制的(URL的最大长度是2048个字符),POST提交无限制
https://www.w3school.com.cn/tags/html_ref_httpmethods.asp
5.GET为form表单的默认提交方式
6.GET方式获取数据后，刷新不会有负面的影响，因为它只是获取数据，POST数据会被重新提交可能会产生不良的后果(浏览器应该告知用户数据会被重新提交)
7.数据类型的限制：GET只允许ASCII字符,POST则无限制(如果提交二进制数据(例如:图片)，需要使用POST方法)
手动提交表单数据

Form表单手动提交（get与post）
在没有任何Js代码的影响下，Form表单本身是自带提交功能的。在form元素标签上有属性：
(1) action：设置表单提交的路径（URL）
(2) method：设置表单提交的方式
表单提交的路径分为两种：
(1) 相对路径：指站点内的文件，就是本地文件。
(2) 绝对路径：指其它站点，就比如从本站点到百度。
设置表单提交方式属性的值有两种：get提交和post提交。如果method不指名提交 方式则默认为get提交。
这两种提交方式需要分别对应不同情况使用：
(1) 相对于post提交而言，get提交更简单也更快，但是传输的容量小，在提交表单时，所有的信息都会暴露在url上，并不安全，通常用来获取数据。
(2) post提交方式能够传输的容量基本上是无穷的，而且提交的数据直接在后台进行处理，保证了数据的安全性，而且在更新数据传输大量数据、传输音频图片或者特殊符号等情况时，就只能使用post，而非get。
通常情况下，我们会取消Form表单的自动提交功能，通过一个onsubmit属性赋值return false。