Form表单提交

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

 

图中的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

 

 

1. 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;" 禁用表单的自动提交方式*@