四种Post请求提交数据的方法

Posted 2021-06-11 是小叶的呢.

html布局如下：

  <div class="container mt-5">
        <form id="myform" @*method="get" action="~/From/getData"*@>
            <div class="form-group form-row">
                <label class="col-form-label col-3 text-center">姓名</label>
                <input class="form-control col-9" type="text" name="name" id="txtName" />
            </div>
            <div class="form-group form-row">
                <label class="col-form-label col-3 text-center">性别</label>
                <select class="form-control col-9" name="sex" id="cboSex">
                    <option value="0">--请选择--</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div> 
            <div class="form-group form-row">
                <label class="col-form-label col-3 text-center">地址</label>
                <textarea class="form-control col-9" name="address" id="txtAddress"></textarea>
            </div>
            <div class="form-group form-row">
                <button type="submit" class="btn btn-outline-primary offset-3 mr-2">表单提交</button>
                <button type="button" class="btn btn-outline-success mr-2" onclick="getData()">GET提交</button>
                <button type="button" class="btn btn-outline-success mr-2" onclick="postData()">POST提交</button>
                <button type="reset" class="btn btn-outline-danger">Reset重置</button>
            </div>
        </form>
    </div>

javascript代码如下：

 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 == "") {
                alert("数据不完整");
            } else {
                var myform = document.getElementById("myform");
                myform.method = "get";
                myform.action = "/From/getDataEntityClass";
                myform.submit();
            }
        }
        function postData() {
            var name = document.getElementById("txtName").value;
            var sex = document.getElementById("cboSex").value;
            var address = document.getElementById("txtAddress").value;
            if (name == "" || sex == 0 || address == "") {
                alert("数据不完整");
            } else {
                var myform = document.getElementById("myform");
                myform.method = "post";//提交的方式
                myform.action = "/From/getDataRequest"; //数据提交的方法
                myform.submit();
            }
        }

效果图如下：


第一种：通过形参的方式接收表单提交的数据

public ActionResult getData(string name,string sex,string address)
        {
            string str = name + sex + address;
            return Content(str+"成功接收到数据");
        }

第二种：通过FormCollection来接收表单的数据

public ActionResult getDataFormCollection(FormCollection form)
        {
            string name = form["name"];
            string sex = form["sex"];
            string address = form["address"];
            string str = name + "&" + sex + "&" + address + "&" + "FormCollection只接收post数据";
            return Content(str);
        }

第三种：通过 Request.Form[“name的属性值”]获取表单数据

public ActionResult getDataRequest()
        {
            string name = Request.Form["name"];
            string sex = Request.Form["sex"];
         string address = Request.Form["address"];
         string str = name + "&" + sex + "&" + address + "&" + "Request只接收post数据";
            return Content(str);
        }

第四种：EntityClass实体类接收数据

public ActionResult getDataEntityClass(Person entityClass)
        {
            string name = entityClass.name;
            string sex = entityClass.sex;
            string address = entityClass.sex;
            string str = name + "&" + sex + "&" + address + "&" + "EntityClass是实体类数据，可以接收post和get数据";
            return Content(str);
        }
        public class Person{
        public string name { get; set; }
        public string sex { get; set; }
        public string address { get; set; }
        }

我们可以通过myform.action = ""使用其他的方法
myform.action = "/From/ getData ";
myform.action = "/From/ getDataFormCollection ";
myform.action = "/From/ getDataRequest ";
myform.action = "/From/ getDataEntityClass ";