JavaScript表单提交总结 .

开发工具与关键技术：Visual Studio 2015 与 JavaScript
作者：执~漠
撰写时间：2020年4月23日

1. form表单的属性action 与method

属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据
method	get/post	规定用于发送form-data的HTTP方法。(提交表单的方式)

URL可能的值：

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

相对 URL - 指向站点内的文件（比如 src="/Form00/getData"）

<form action="/Form00/getData" method="post"></form>

2.get提交
method的默认值是get提交。
get提交时参数暴露在url上。

//可以直接写在form标签里面
<form id="myForm" action="/From/GetData" method="get">
  var name = document.getElementById("txtName").value;
  var sex = document.getElementById("cboSex").value;
  var address = document.getElementById("txtAddress").value;
  //判断数据是否完整
  if (name != "" && sex != "" && address != "") {
      var myForm = document.getElementById("myForm");
      //提交方式
      myForm.method = "get";
      //提交的地址
      //1.通过形参的方式接收表单数据、4.EntityClass实体类接收数据
      //myForm.action = "/From/GetData";
      myForm.action = "/From/getDatByEntityClass";
      myForm.submit();
  } else {
      alert("数据不完整");
  }

3.POST提交
post没有数据量限制，提交的数据不会暴露在url上面保密性强，他可以提交图片等等。

var name = document.getElementById("txtName").value;
   var sex = document.getElementById("cboSex").value;
   var address = document.getElementById("txtAddress").value;
   if (name != "" && sex != "" && address != "") {
       var myForm = document.getElementById("myForm");
       //提交方式
       	myForm.method = "post";
       //提交的地址
	  //1.通过形参的方式接收表单数据、2.通过FormCollection来接收表单的数据,3.通过Request.Form["name的属性值"]来接收表单的数据,4.EntityClass实体类接收数据
         myForm.action = "/From/getDatByEntityClass";//控制器的名称/控制器里面的方法
         myForm.submit();
    } else {
         alert("数据不完整");
   }

4.服务器接收数据有四种
4.1通过形参的方式接收表单数据,方法里面的参数一定要和页面上的input标签上的name名一样（不同接受不到数据）。（post和get都能接收）

public ActionResult GetData(string name,string sex,string address)
        {
        string str = "1.通过形参的方式接收表单数据" + name + "&" + sex + "&" + address;
        return Content(str);
        }

4.2通过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);
}

4.3通过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的属性值']来接收表单的数据" + name + "&" + sex + "&" + address;
       return Content(str); 
}

4.4EntityClass实体类接收数据（post和get都能接收）

public ActionResult getDatByEntityClass(Person person){ 
        string name = person.name;
        string sex = person.sex;
        string address = person.address;
        string str = "4.EntityClass实体类接收数据" + name + "&" + sex + "&" + address;
        return Content(str); }
        //创建实体类
        public class Person
        { 
			public string name { get; set; }
            public string sex { get; set; }
            public string address { get; set; }
        }