JavaScript表单提交

[weixin_47221159]

JavaScript表单提交
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Visual Studio 2015 与 JavaScript
作者：黄富滔
撰写时间：2020年4月30日
知识点罗列
1、Form表单的属性
①action：相当于一个路径（URL），规定当提交表单时向那个服务器发送表单数据
URL可能的值：
绝对 URL - 指向其他站点（比如 src="www.baidu.com"）。
相对 URL - 指向站点内的文件（比如 src="/Form/getData"）说明：【第一个值为控制器名称，第二个值为控制器方法的名称】。

②method：有get/post两个值，规定用于发送form-data的HTTP方法。(提交表单的方式)
例如：<form action="/Form/getData" method="post"></form>
详细讲解get和post
get提交时参数直接暴露在URL上。
(W3School上给出的区别：)
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
1.无法使用缓存文件（更新服务器上的文件或数据库）
2.向服务器发送大量数据（POST 没有数据量限制）
3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
get/post区别：
1.GET方法是用来向服务器上获取数据，而PSOT是用来向服务器上传递修改数据。
2.GET将表单里的数据添加到action所指向的URL后面，并且两者之间使用”?”连接。 而各个变量之间使用"&"连接;PSOT是将表单中的数据放在form的数据体(FormData)中，按照键值对的方式，传递到所指向的action
3.GET是不安全的，因为在传输过程中，数据被放在请求的url中这样用户可以直接在浏览器上看到提交的数据，POST的所有操作对用户来说都是不可见的,数据都在数据体(FormData)中
4.GET方法向URL添加数据,URL的长度是受限制的(URL的最大长度是2048个字符),POST提交无限制
5.GET为form表单的默认提交方式
6.GET方式获取数据后，刷新不会有负面的影响，因为它只是获取数据，
POST数据会被重新提交可能会产生不良的后果(浏览器应该告知用户数据会被重新提交)
7.数据类型的限制：GET只允许ASCII字符,POST则无限制(如果提交二进制数据(例如:图片)，需要使用POST方法)
注意：一定要调用到表单的方法 form.submit();


2、表单获取数据的四种方法

第一种方法：
-通过形参的形式去接收数据（get和post方式都能接收）
-形参之间用“,”逗号隔开
-定义的参数一定要和表单中的属性保持一致，不然无法接收数据
public ActionResult GetData(string name,string sex,string address)
{
string str = "1.通过形参的方式接收表单提交的数据"+name + "&" + sex + "&" + address;
return Content(str);
}


第二种方法：
-通过FormCollection来接收表单数据（只能接收post方式提交过来的数据）
public ActionResult getDataByFormCollection(FormCollection form)
{
string name = form["name"];
string sex = form["sex"];
string address = form["address"];
string str = "2.通过FormCollection来接收表单的数据" + name + "&" + sex + "&" + address;
return Content(str);
}


第三种方法：
-通过 Request.Form["name的属性值"]获取表单数据 （只能接收post方式提交过来的数据）
public ActionResult getDataByRequest()
{
string name = Request.Form["name"];
string sex = Request.Form["sex"];
string address = Request.Form["address"];
string str = "3.通过Request.Form来接收表单的数据" + name + "&" + sex + "&" + address;
return Content(str);
}


第四种方法：
-通过创建EntityClass实体类接收数据（get和post方式都能接收）
public ActionResult getDataByEntityClass(Person person)
{
string name = person.name;
string sex = person.sex;
string address = person.address;
string str = "4.EntityClass实体类接收数据" + name + "&" + sex + "&" + address;
return Content(str);
}
//js中 Person 通过构造函数去创建对象

//创建实体类
public class Person {
public string name { get; set; }
public string sex { get; set; }
public string address { get; set; }

}