关于form表单 数据的post与get提交知识

最近几天老师在跟我们讲解form的get与post提交的区别！在这呢我也想分享给大家，内容比较简洁。
大家可以看一下图片，注意输入地址的那个地方，当我在input标签中输入内容时。进行表单提交时，表单里面的内容是直接暴露在URL后面的；为什么会这样;这就是我今天要讲的内容：讲之前大家先注意form的一些值：
注意：每一个input 标签动都有name属性，form要作为action和method的属性
表单有一个自动提交的操作。如果不想表单进行自动提交和进行整个表单的提交，这时你可以在表单后面设置 onsubmit = “return false”
表单涉及的值： 这几个值具体的用法下面都有详细的介绍
1、action：url
2、method
3、name

一、 form表单有两个属性action与method
属性 值 概述
action URL 规定表单数据往何处发送
method get/post 提交表单的数据
url的值：
第一种绝对的路径值：就像登录百度那样，获取一个绝对路径
第二种相对路径：看以下，就是在JING控制器的路径下，如果更换控制器url也会进行更换

form提交方式：get与post
与post 相比 GET 在数据请求会更加的快速，并且在多数情况下都可以进行使用。
但是get不是万能的。
注意：
在以下几种情况下要使用POST 请求数据
1、 无法使用缓存文件
2、 向服务器发送大量数据 (注意 post 没有数据量限制，get:传输量受URL长度的限制)
3、 重点 发送一些未知字符或者敏感数据时，post 比get 更加稳定也更加可靠，再看这张图

代码： 效果图：

内容解说：当我在form 中运用 method= get 的方式进行表单提交 我所提交的数据就直接暴露在URL后面，大家可以想一想 内容直接暴露出来这是多不安全的做法；所以建议大家不要乱用get 进行表单提交，避免泄露什么重要信息。并且 get 也不会给你太多的空间，当你要发送大量数据将会受阻
关于get与post区别：
1、 GET方法用来向服务器上获取数据，而post是向服务器上传第修改数据的
2、 GET将表单的数据添加到action所指向的URL后面，两种用 “？” 拼接 ，变量之间用 “&” 连接，post 是将表单中的数据放在 form数据体之中。
3、 GET传输的数据量小。POST传输数据量大 ；所以在传输文件和大量数据要用post，
4、 Form默认get 方法提交。
此片文章乃老师上课所讲内容，进行简单的知识总结整理。
知识点扩展：
表单也有几个事件是在做项目经常用到的,在这里我也放在这里给你们啦！

注：此内容在老师文档所截获取下来的。加粗的就是经常要用到的。我也只对加粗的那几个常用的进行介绍。
代码部分
< form method=“post” id=“form”/>
姓名：< input type =“text” name=“心心” id = “name”/ >
< br>
年龄：< input type=“text” name=“18” id=“age” />
< br>
< button type=“submit”>提交 </ button >
< /form>
< script>

var listName = document.getElementById(“name”);
var listAge = document.getElementById(“age”);
var from = document.getElementById(“from”);
listName.onblur = function (event) {
console.log(“姓名文本框失去了焦点”)
}
onchange
listAge.onchange = function (event) {
console.log(“selectSex的值发生了改变”);
}
form.onsubmit = function () {
console.log(“from表单提交”);
return false;
}
< script>
效果图：
onblur:

onchange


onsubmit

以上就是今天我要分享给大家的内容，也是我对自己知识的巩固，希望你能喜欢。
结束语：不知道我所说的内容是否有错误；如果有请大家进行留言纠正我的错误；也可以进行相关专业知识上的知识交流。在此先谢谢了！！！