获取form表单数据的四种方法 (可以接收post与get提交的数据)

        在日常工作中或浏览网页时，我们经常使用和看到很多表单提交的功能与样式。而这个功能是用form表单和一些JavaScript或jQuery来实现的。

        现在我们就用 Visual Studio 2019  来对其来进行验证，form表单实现数据获取的方法有四种。

1.通过形参的方式接收表单提交的数据。

2.通过FormCollection来接收表单的数据。

3.通过 Request.Form["name的属性值"]获取表单数据。

4.EntityClass实体类接收数据。

   

下面我们就用实例来对其进行说明。

        样式部分，我们采用Bootstrap框架来布局。

        说明：使用Bootstrap框架时，我们要引入外部文件来进行引用。

/*css*/


/*js.jp*/

     

  HTML部分代码

        @*onsubmit="return false;" 禁用表单的自动提交方式*@
        

            

                姓名
                
            
            

                性别
                
                    --请选择--
                    男
                    女
                
            
            

                地址
                
            
            

                表单提交
                GET提交
                POST提交
                Reset重置
            
        
    

样式

            

1.form表单的属性action 与 method

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

       URL可能的值：
                绝对 URL - 指向其他站点（比如 src="www.baidu.com"）
                相对 URL - 指向站点内的文件（比如 src="/Form00/getData"）

method的值 get/post

（1）method的值 get/post

            get提交时参数直接暴露在URL上。
            (W3School上给出的区别：)
            与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
            然而，在以下情况中，请使用 POST 请求：
                    1.无法使用缓存文件（更新服务器上的文件或数据库）
                    2.向服务器发送大量数据（POST 没有数据量限制）
                    3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

（2）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提交无限制
                    https://www.w3school.com.cn/tags/html_ref_httpmethods.asp
                5.GET为form表单的默认提交方式
                6.GET方式获取数据后，刷新不会有负面的影响，因为它只是获取数据，
                    POST数据会被重新提交可能会产生不良的后果(浏览器应该告知用户数据会被重新提交)
                7.数据类型的限制：GET只允许ASCII字符,POST则无限制(如果提交二进制数据(例如:图片)，需要使用POST方法)
        

手动提交表单数据

function getData() {
            var name = document.getElementById("txtName").value;
            var sex = document.getElementById("cboSex").value;
            var address = document.getElementById("txtAddress").value;
            if (name != "" && sex != 0 && address != "") {
                var form = document.getElementById("frm");
                //1./Main/GetData 通过形参接收数据
                //form.action = "/Main/GetData";
                //4.EntityClass实体类接收数据
                form.action = "/Main/getDataByEntityClass";
                form.method = "get";
                form.submit();
            } else {
                alert("表单填写的数据不能为空，请检查");
            }
        }
 function postData() {
            var name = $("#txtName").val();
            var sex = $("#cboSex").val();
            var address = $("#txtAddress").val();
            if (name != "" && sex != 0 && address != "") {
                var form = document.getElementById("frm");
                //1./Main/GetData 通过形参接收数据
                //form.action = "/Main/GetData";
                //2."/Main/getDataByFormCollection" 通过FormCollection来接收数据
                form.action = "/Main/getDataByFormCollection";
                //3.通过 Request.Form["name的属性值"]获取表单数据
                //form.action = "/Main/getDataByRequest";
                //4.EntityClass实体类接收数据
                form.action = "/Main/getDataByEntityClass";
                form.method = "post";
                form.submit();
            } else {
                alert("表单填写的数据不能为空，请检查");
            }       
        }

 当点击GET提交按钮时浏览的地址和参数会在搜索框上显示

                                   

当点击POST提交按钮时浏览的地址会在搜索框上显示

                                  

1.通过形参的方式接收表单提交的数据

 //手动提交表单数据
        function getData() {
            var name = document.getElementById("txtName").value;
            var sex = document.getElementById("cboSex").value;
            var address = document.getElementById("txtAddress").value;
            if (name != "" && sex != 0 && address != "") {
                var form = document.getElementById("frm");
                //1./Main/GetData 通过形参接收数据
                form.action = "/Main/GetData";
                form.method = "get";
                form.submit();
            } else {
                alert("表单填写的数据不能为空，请检查");
            }
        }
        function postData() {
            var name = $("#txtName").val();
            var sex = $("#cboSex").val();
            var address = $("#txtAddress").val();
            if (name != "" && sex != 0 && address != "") {
                var form = document.getElementById("frm");
                //1./Main/GetData 通过形参接收数据
                form.action = "/Main/GetData";
                form.method = "post";
                form.submit();
            } else {
                alert("表单填写的数据不能为空，请检查");
            }       
        }

2.通过FormCollection来接收表单的数据。

      function postData() {
            var name = $("#txtName").val();
            var sex = $("#cboSex").val();
            var address = $("#txtAddress").val();
            if (name != "" && sex != 0 && address != "") {
                var form = document.getElementById("frm");
                //2."/Main/getDataByFormCollection" 通过FormCollection来接收数据
                form.action = "/Main/getDataByFormCollection";
                form.submit();
            } else {
                alert("表单填写的数据不能为空，请检查");
            }       
        }

3.通过 Request.Form["name的属性值"]获取表单数据。

 //手动提交表单数据
        function postData() {
            var name = $("#txtName").val();
            var sex = $("#cboSex").val();
            var address = $("#txtAddress").val();
            if (name != "" && sex != 0 && address != "") {
                var form = document.getElementById("frm");
                //3.通过 Request.Form["name的属性值"]获取表单数据
                form.action = "/Main/getDataByRequest"; 
                form.method = "post";
                form.submit();
            } else {
                alert("表单填写的数据不能为空，请检查");
            }       
        }

4.EntityClass实体类接收数据

 public ActionResult getDataByEntityClass(Person person)
        {
            string name = person.name;
            string sex = person.sex;
            string address = person.address;

            string str = name + sex + address;

            return Content(str);
        }

        //创建一个名为public的类
        public class Person
        {
            //public string name;//成员变量
            public string name { get; set; }//属性
            public string sex { get; set; }  //属性
            public string address { get; set; }  //属性
        }
    }
}

 //手动提交表单数据
        function getData() {
            var name = document.getElementById("txtName").value;
            var sex = document.getElementById("cboSex").value;
            var address = document.getElementById("txtAddress").value;
            if (name != "" && sex != 0 && address != "") {
                var form = document.getElementById("frm");
                //4.EntityClass实体类接收数据
                form.action = "/Main/getDataByEntityClass";
                form.method = "get";
                form.submit();
            } else {
                alert("表单填写的数据不能为空，请检查");
            }
        }
        function postData() {
            var name = $("#txtName").val();
            var sex = $("#cboSex").val();
            var address = $("#txtAddress").val();
            if (name != "" && sex != 0 && address != "") {
                var form = document.getElementById("frm");
                //4.EntityClass实体类接收数据
                form.action = "/Main/getDataByEntityClass";
                form.method = "post";
                form.submit();
            } else {
                alert("表单填写的数据不能为空，请检查");
            }       
        }

  小结：（1）使用 @*οnsubmit="return false;" 可禁用表单的自动提交*@

             （2） get 与 post 各有各的优点 ，要根据实际情况来使用。

             （3）使用get获取表单数据提交方法有两种 ，分别是 1 和 3 ；而使用post获取表单数据提交方法有四种。