Form表单提交
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:vis JavaScript
作者:彭嘉豪
撰写时间:2021:5:17
自动提交
<form id="frm" autocomplete="off" action="/Mian/GetData" method="post" onsubmit="return false">···</form>
一.
(1)
autocomplete="off" 可以关闭提交的过记录。
form表单的属性:
action : 规定当提交表单时向何处发送表单数据 值:URL
Method:规定用于发送form-data的HTTP方法。(提交表单的方式) 值:get/post
<form action="/Form00/getData" method="post"></form>
URL可能的值:
绝对 URL - 指向其他站点(比如 src="www.baidu.com")
相对 URL - 指向站点内的文件(比如 src="/Form00/getData")
Ff![](https://i-blog.csdnimg.cn/blog_migrate/72987bee74c99c00711574fe7a95c6a9.png)
图中的form标签 action连接的"/Mian/GetData" 是在控制器写的方法的链接
在控制器里的个方法 返回数据
后面的method的值可以填get/post
get提交时参数直接暴露在URL上。
使用get方法提交的参数
-----------------------------
使用post提交的参数
Get与post相比,get更加简单也更加快速,并且在大部分情况下都能用。
但是get无法使用缓存文件(更新服务器上的文件或数据库)
不能向服务器发送大量数据(POST 没有数据量限制)
在发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
get/post区别:
1.GET方法是用来向服务器上获取数据,而PSOT是用来向服务器上传递修改数据。
2.GET将表单里的数据添加到action所指向的URL后面,并且两者之间使用”?”连接;而各个变量之间使用"&"连接;PSOT是将表单中的数据放在form的数据体(FormData)中, 按照键值对的方式,传递到所指向的action
- get在在传输过程中,数据放在请求的url中,用户可以在浏览器上看到提交的数据,POST的所有操作对用户来说都是不可见的,数据都在数据体(FormData)中。所以相对的更加安全。
4.GET方法向URL添加数据,URL的长度是受限制的(URL的最大长度是2048个字符),POST提交无限制。
GET为form表单的默认提交方式
5.GET只允许ASCII字符,POST则无限制,如果提交二进制数据(例如:图片),需要使用POST方法。
-
除了自动提交表单数据,还有手动提交表单数据。
这样可以阻止用户在没有输入内容提交内容。
使用js手动提交表单
定义方法
然后获取到表单的内容value
写一个判断,判断表单是否有内容,有则执行下面代码,没有就弹出提示。
里面的代码,先获取到form表单。然后设定action,method,submit属性方法。
在button里用onclick绑定getData方法。
<button type="button" class="btn btn-outline-success mr-2" οnclick="getData()">GET提交</button>
使用jq手动提交表单
跟js一样,定义方法,获取表单内容,然后if判断,里面用attr属性设置action,method属性,在按钮绑定方法。
@*οnsubmit="return false;" 禁用表单的自动提交方式*@