Form表单

这篇文章主要讲的是form表单的提交

之前我们接触过的form表单元素是在Bootstrap框架里面，这次也将用到Bootstrap框架去布局（见图表1）通过Bootstrap框架布局呈现的一个效果，就直接讲form表单提交的方式了

图表 1

【复习】

在开始讲form表单提交的方式之前会复习一下form表单元素

Form表单元素

Text：文本框

<select>

<option> </option>

</select> ：下拉框

textarea：文本域

Button：按钮

Checkbox：复选框

Radio：单选框

Color：颜色盘

Number：数字文本框

这里重点讲button按钮。在form表单中有以下三个不同的按钮效果事件：

Submit：表单提交的一个效果（功能）通过指定的地址把数据提交到哪里指定的地址则是通过action=“/”去指定

Button：普通的按钮

Reset：整个表单重置（它具有这个功能）

例：<button type=”submit”></button>

1、创建新的视图之后，启动调用浏览器，看到刷新旁边有一组数据，这组数据是什么意思了？（见图表2红色框）

图表 2

Localhost:本机

：54577：断口号（具体见自己浏览器）

AjaxForm/Index：它下面的某个控制器某个方法

2、前面是在视图里面启动浏览器，那为什么在控制器里面启动浏览器会报错了，要怎么解决？

在控制器解决方案资源管理器下面有一个App_Start下面有一个RouteConfig.Css （见图表3）

图表 3

里面最下面有一句代码（见图表4）

图表 4

Defaults：默认的是项目打开的哪一个控制器。我们项目中没有home控制器，所以则会报错，我们只需要把home改成我们项目中控制器的名称即可，我们回到控制器里面去启动浏览器则不会报错了

之前我们接触的form表单里面是不是没有action和method这两个属性，就直接是form表单元素，这里我们将要学action和method。

什么是action和method。

Action=“/”：用于提交表单数据指定提交的一个地址

Method=“ ”：提交的方式。提交的方式有很多种，默认提交的方式是get。我们这次主讲get和post。

get和post提交完成的功能是一样但是有区别。Get是从服务器获取、拉取数据的意思；post是投递的意思，它主要是把数据投过去，传送过去

我们现在来看一下form表单的属性action与method

属性	值	描述
action	URL（一个。路径）	规定当提交表单时向何处发送表单数据
method	Get/post	规定用于发送form-data的HTTP方法（提交表单的方式）
例：<form action=”/ajaxform/getdata” method=”post”></form>

URL可能的值：

绝对URL—指向其他站点（比如src=”www.baidu.com”）

相对URL—指向站点内的文件（比如src=”/form00/getdata”）

我们来看一下URL规定当提交表单时向何处发送表单数据。那我们来试一下，在我们的控制器中去写某个方法，给它一个名字为getData（见图表5）

图表 5

这里又要接触一个新的知识点：断点

断点：代码程序运行到这个地方它就会停到这个地方，然后就可以对代码进行调式

如何断点？

在代码行号前面点一下，出现红色圆圈既是断点

我们定义了这个方法之后，我们则转到视图里面去找到form表单里面action，前面说过action是指定提交的一个地址，

他这里提交的地址则是你添加控制器的名称下面你新建的那个方法的名称（具体看自己添加的名称）

我这里控制器的名称是AjacForm，新建方法的名称为getData

所以我这里的提交地址的写法为：<form action=”/AjaxForm/getData”></form>

在运行一下项目，提交一下表单，它的代码就会停在我们刚刚断点的那个地方（见图表6）

想要继续运行则点击一下断点的位置，点继续运行即可，他就会有一个返回值，这里返回的这个值则是我们新建控制器返回的一个内容（数据）

在form表单里面只要指明了action和method这两个属性之后，只要点击Submit这个按钮，他就可以把数据提交到我们新建的方法里面来，这个方法在给它返回一个数据

3、那我想要点击Button 这个自身没有带任何样式的按钮，那要怎么去实现了？

这里注意了，action提交的地址，method提交的方式，现在我们页面上提交的方式是get，通过 get提交的方式，它会把要提交的数据全部暴露在URL地址栏上面；通过post提交，他不会把我们要提交的参数暴露在URL上面，可以在检查===》Network下面则有getData的方法，你点一下就会出现提交的相关数据（见图表6）

图表 6

我们来看一下Method的值get /post的一些区别

注意：Get提交时参数直接暴露在URL上面。

（W3School上给出的区别：）

与POST相比，GET更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用POST请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST没有数据量限制）
发送包含未知字符的用户输入时，POST比get更稳定也更可靠

Get/post区别：

get方法是用来向服务器上获取数据，而POST是用来向服务器上传递修改数据
get将表单里的数据添加到actio所指向的URL后面，并且两者之间使用“？”链接，而各个变量之间使用“&”连接；POST是将表单中的数据放在form的数据体（FormData）中。按键值对的方式，传递到所指向的action
get是不安全的，因为在传输过程中，数据库被放在请求的url中这样用户可以直接在浏览器上看到提交的数据；post的所有操作对用户来说都是不可见的，数据都在数据体（FormData）中
get方法向URL添加数据，URL的长度是受限制的（URL的最大长度是2048个字符）；post提交无限制
get为form表单的默认提交方式
get方式获取数据后，刷新不会有负面的影响，因为他只是获取数据；post数据会被重新提交可能会产生不良的后果（浏览器应该告知用户数据会被重新提交）
数据类型的限制：get只允许ASCII字符，post则无限制（如果是提交二进制数据（例如：图片），需要使用post）

控制器中接收表单提交数据的4种方式【获取表单数据的4种方式】：（可以接收post与get提交的数据）

我们先来看第一种通过形参的方式接收表单提交的数据（见图表7）

图表 7

那边提交过来数据有三个，但我这里没有把他提交的数据获取到，那我想获取到她前面传递过来的数据，则要对getdata这个方法进行处理。就像js一样定义了一个方法前面就要调用它，调用它传递参数，我们这里就要用一个形参来接收。（方法里面就叫形参，这个参数则要和form表单里面的name属性一一对应）

我们这边页面上一共传递过来三个数据分别是姓名、性别、地址。

姓名、性别、地址是一个字符串类型的变量(见图表8)(String name，string sex，string address 形参的类型)

图表 8

获取了这个数据，把它重新拼接成一个字符串，把字符串返回（见图表7）

注意：在js中这里没有指定数据类型，在aikes(埃克森)和seshoop(色夏普)中它是一定要指明接收的类型，也就是一定要指明形参

注意：这个属性值不能顺便取，必须跟表单里面的属性值一样，才能接收数据

以上是表单自动提交的功能，我们还可以通过手动的去提交数据

我们先定义两个方法getData()和postData()，把这两个方法分别放在表单里面没有自带样式的按钮上。给它添加一个点击事件οnclick=”getData（）/postData（）”

提交表单的功能就是手动的去指定“action=”/AjaxForm/getData” method=”post”这两个属性

怎么去指定？

给form表单添加一个id

先用js的方式去指定：

先获取form的id元素、给form指定action提交的地址和指定method提交的方式；这里只是指定它的属性，还要进行一个提交操作（见图表9）

图表 9

这里需要作一个验证，当我们数据全部选择完了才可以提交？

（1）、获取对应的数据

（2）、元素全部获取成功之后，做判断用if.....else

如果name值不等于空并且sex不等于0并且address不等于空，都不等于的时候才能进行一个提交操作（几个条件要一起成立），如果有一个条件不成立就要提醒用户“表单数据不能为空”（见图表10）

图表 10

οnsubmit="return false;禁用表单自动提交的方式。直接在form表单上面填写

autocomplete=”off”：关闭之前在form表单上面填写过的数据

第二种方式：通过FormCollection来接收表单的数据（只能接收到post提交过来的数据，get提交过来的数据接收不到）（见图表11）

图表 11

FormCollection：类类型

String：字符串类型

我们前面手动添加的那两个提交方法不变，我们只改动action提交的地址。怎么改动？

还是和第一种方式的改动一样，控制器的名称下面用第二种方式新建方法的名称【具体看自己添加的名称】（见图表12）

图表 12

接收到参数怎么（获取）取出来？

则是通过form，一个键值对的形式

定一个变量=form[“name”(键)]；这样就可以把数据取出来（见图表13）

图表 13

这里的名称可以不一样，可以可以自己定义

这个名称和form表单里面的属性名必须一样，不可更改

获取到了数据就进行一个返回（见图表14）

图表 14

第三种方式：在接收数据的时候不需要传递任何参数通过Request.Form[“name的属性值”]获取表单数据（只能接收post提交过来的数据）

Request.Form[“name的属性值”] 直接从你提交过来的表单里面去取数据

怎么去取？

定义一个变量 = Request.Form[“name的属性值”]；

通过Request.Form的方法获取之后在声明一个变量把上面定义变量的名称加起来，然后进行一个返回（见图表15）

图表 15

方法下面的返回值

注意：return Content(“ ”) ； Content(“ ”) 这个方法他返回的数据（类型）就是一个字符串

return Json(“ ”)；Json(“ ”) 返回的这个数据它会转换为json类型的字符串，给你返回；如果一个数据他转换为json的数据格式给你

我们在回到视图里面去改变他提交的地址，这个改变提交的地址和之前提交地址的方法一样，方法不变，只改表控制器的名称下面用第三种方式新建方法的名称【具体看自己添加的名称】（见图表16）

图表 16

第四种方式：通过EntityClass实体类接收数据（可以接收post和get提交的数据）

我们要自己去定义一个类，要定义一个类，就通过class这个关键字去定义一个类 public就是一个修饰符而已

这个类里面我们要去接收提交过来的三个参数，那我们就去类里面定义三个属性，这个属性怎么去定义的？

（修饰符 string name值；）//成员变量用来存储数据

修饰符 string name值{get；set；} //类里面的属性

类的成员里面可以是一个成员变量、可以是一个成员属性，也可以有一个方法（见图表17）

图表 17

定义了一个类就可以去定义一个方法，定义了一个方法之后，我们就可通过刚刚定义的类来接收（与第二种方式：类类型差不多）

改变提交地址和之前改变地址的方法一样

获取到值了，还是先定一个变量 name值等于定义的类点属性值（见图表18）

图表 18

【知识点回顾】

这篇文章我们主要说了几个新的知识点

button按钮在form表单中有三个不同的按钮效果事件：

（1）、Submit：表单提交的一个效果（功能）通过指定的地址把数据提交到哪里指定的地址则是通过action=“/”去指定

（2）、Button：普通的按钮

（3）、Reset：整个表单重置（它具有这个功能）

2、form表单的属性action与method

3、断口号

4、四种表单提交的方式

form表单、控制器中接收表单提交数据的4种方式相关推荐

form表单提交数据的两种方式——submit直接提交、AJAX提交
submit提交 form表单本身提供action属性,在action属性中填写数据提交地址后,点击submit类型的按钮即可将数据提交至指定地址,代码如下: <form action=&quo ...
php form表单提交方式,form表单提交数据的几种方式
一.submit提交一般表单提交通过type=submit实现,input type="submit",浏览器显示为button按钮,通过点击这个按钮提交表单数据跳转到/url. ...
PHP表单提交的方式有哪两种,form表单提交数据的几种方式
一.submit提交在form标签中添加action(提交的地址)和method(post),且有一个submit按钮()就可以进行数据的提交,每一个input标签都需要有一个name属性,才能进行 ...
abap视图字段限制_在 Laravel 控制器中进行表单请求字段验证
在 Web 应用中,用户提交的数据往往是不可预测的,因此一个非常常见的需求是对用户提交的表单请求进行验证,以确保用户输入的是我们所期望的数据格式.很多 Web 框架都对此功能专门提供了工具集,Lara ...
控制器中接收数据的四种方式
控制器中接收数据的四种方式: (仅限于个别的方式(get/post)有效) 通过形参的方式接收表单提交的数据(可以接收post与get提交的数据): 注释: GetData自己定义的方法名里面存入形参 ...
oracle--day2（单值函数（字符函数，日期函数，转换函数，数字函数），日期格式（yyyy，mm等含义），表示一个日期数据的4种方式，多表查询（连接查询（等值连接，不等值连接，外连接，自连接））
第三章:单值函数函数分为: 1.单值函数 1.字符函数 2.日期函数 3.转换函数 4.数字函数 ...
MySQL 清空表数据的两种方式和区别
在MySQL中删除数据有两种方式:truncate table 表名.delete from 表名. 它们在以下方面存在区别: 执行效率 truncate不扫描表,相当于重新创建了表,只保留了表的结构 ...
Android中实现SQLite数据库CRUD操作的两种方式
Android中实现SQLite数据库CRUD操作的两种方式 SQLite是一款轻量级的关系型数据库,具有运行速度.占用资源少的特点.通常只需要几百KB的内存就够了,因此特别适合在移动设备上使用.SQ ...
python读取图像数据流_浅谈TensorFlow中读取图像数据的三种方式
本文面对三种常常遇到的情况,总结三种读取数据的方式,分别用于处理单张图片.大量图片,和TFRecorder读取方式.并且还补充了功能相近的tf函数. 1.处理单张图片我们训练完模型之后,常常要用图片 ...

form表单、控制器中接收表单提交数据的4种方式

Form表单

【复习】

Form表单元素

第二种方式：通过FormCollection来接收表单的数据（只能接收到post提交过来的数据，get提交过来的数据接收不到）（见图表11）

第三种方式：在接收数据的时候不需要传递任何参数通过Request.Form[“name的属性值”]获取表单数据（只能接收post提交过来的数据）

第四种方式：通过EntityClass实体类接收数据（可以接收post和get提交的数据）

【知识点回顾】

form表单、控制器中接收表单提交数据的4种方式相关推荐

最新文章

热门文章

form表单、控制器中接收表单提交数据的4种方式

Form表单

【复习】

Form表单元素

第二种方式：通过FormCollection来接收表单的数据（只能接收到post提交过来的数据，get提交过来的数据接收不到）（见图表11）

第三种方式：在接收数据的时候不需要传递任何参数 通过Request.Form[“name的属性值”]获取表单数据（只能接收post提交过来的数据）

第四种方式：通过EntityClass实体类接收数据（可以接收post和get提交的数据）

【知识点回顾】

form表单、控制器中接收表单提交数据的4种方式相关推荐

最新文章

热门文章

第三种方式：在接收数据的时候不需要传递任何参数通过Request.Form[“name的属性值”]获取表单数据（只能接收post提交过来的数据）