表单有两个较特殊的属性,一个是method,是规定用于发送表单的HTTP方法(提交表单的方式);还有一个是action,是规定当提交时向何处发送表单的数据(要提交表单的地址)。Form表单有一个自动提交的功能(submit)有时候不写submit也会自动提交。可以默认不写。如果不想要表单自动提交就要写阻止表单自动提交的方法(οnsubmit=“return false;”)。

表单的提交方式有两种:分别是get提交(为表单的默认提交方式)与post提交。

首先是get提交,get提交时参数会直接暴露在URL上。如下图:

axios 实现 form提交效果 form的提交_axios 实现 form提交效果

axios 实现 form提交效果 form的提交_表单_02


在form表单输入所对应的值,然后点击表单提交,提交之后它就会把表单的数据添加到所指向的URL后面,两者之间用“?”链接,每个变量之间用“&”链接。

Get提交可以更简单更快并且在大多数情况下都能使用,但是在以下几种情况不能使用(最好不要使用):

一、在提交时无法使用缓存文件的时候;

二、向服务器发送大量的数据的时候(get提交有数据量限制);

三、发送包含着未知字符的用户输入的时候(get提交是不安全的);

四、在更新服务器上的文件会数据库的时候。

接下来是post提交:post提交是将表单的数据放在form的数据体中。如下图:

axios 实现 form提交效果 form的提交_服务器_03


在表单中输入相对应的值,然后点击表单提交,提交之后它就会把数据放到form的数据体中,按照变量和值对象的方式传到所指向的action(也就是控制器),然后到控制器断点才能看到页面表单输入的值。如下图:

axios 实现 form提交效果 form的提交_服务器_04


左边是代码,右边是断点后看到的值。而在URL上也只是提交表单时发送表单数据的URL,没有其他的值或者其他的参数。Post需要特别注意的一点是提交数据之后再刷新页面重复提交会产生不良的后果,如下图:

axios 实现 form提交效果 form的提交_数据_05


如果重复刷新页面服务器就会反复提醒上图的信息,会让人感觉很烦躁,这是它最不好的一点。

Get与Post的主要区别:

1、 Get方法是用来向服务器上获取数据;而Post是用来子昂服务器上传递修改数据。

2、 两者传递参数的方式不一样,Get是将数据直接添加到action所指向的URL后面;而Post是将数据放在form的数据体中。

3、 Get是不安全的,因为在传输数据的过程中数据直接暴露在请求的URL上,用户可以在浏览器上看到提交的数据,还有一些系统内部信息也会显示在用户面前;而Post的所有操作用户都是不可见的。

4、 Get提交传输的数据量少,受限于URL的长度限制;而Post提交没有数据量限制。

5、 Get提交方式获取数据后刷新不会有负面影响;而Post提交刷新页面重复提交可能会产生不良的后果。

Post获取表单元素的四种方式:

第一种:FormCollection from;

第二种:Request.Form[“txtName”](txtName为表单元素中name属性的值);第三种:是通过传递参数的形式来接收表单元素;

第四种是用实体模型来接收实例化的对象,通过实例化对象来接受表单元素。

Get获取表单元素只有一种方式,就是通过传递参数的形式来接受表单元素。