form表单的提交

使用工具 :Visual Studio2015

首先我们要写一个表单;

下面的表单是用bootstrap插件写的；

    <div class="container mt-5">

        <form action="/mian/nrng" method="post" id="from">

            <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="fkwng" value="" />

                <label class="col-form-label col-3 text-center">电话号码</label>

                <input type="text" name="name" value="" class="form-control col-9"  id="urfhwef"/>

            </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="ejfn">

                    <option value="0">请选择</option>

                    <option value="1">男</option>

                    <option value="2">女</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="ewfn"></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>

 

这是页面效果;

 

 

 

在进行提交之前先创建一个接收表单数据的方法 下面这个方法是可以接收get提交的数据也可以提交post提交的数据;

public ActionResult nrng(string name,string sex,string address,string ding)

        {

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

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

            string mr = name + sex + address+ding;

            return Content("名字"+name+"性别"+sex+"地址"+address+"电话号码"+ding);

        }

 

这下面是用js写的:首先应该获取表单的内容:

获取对应的id值然后使用value方法;获取数据;

如;获取姓名

   var name = document.getElementById("fkwng").value;

然后将刚刚获取的数据使用;form自带的;action方法和method方法;action是它提交的路径定义了当表单被提交时数据被送往何处;method方法是提交的方式提交的方式有两种一种是get还有一种是post;

这两种方法 get-从指定的资源请求数据  post-向指定的资源提交要处理的数据  get基本上用于从服务器获取数据,不过post方法不会缓存数据，并且常用于连同请求一起发送数据.

这下面的是js部分;

 <script>

        function getData() {

            var name = document.getElementById("fkwng").value;

            var sex = document.getElementById("ejfn").value;

            var add = document.getElementById("ewfn").value;

            var ding = document.getElementById("urfhwef").value;

            if (name != ""&& sex != ""&& add != ""&& ding!="") {

                    var form = document.getElementById("from");

                    form.action = "/mian/nrng";

                    form.method = "get";

                    form.submit();

               

            }else{

                alert("请输入正确的值");

            }

        }

        function postData() {

            var name = $("#fkwng").val;

            var sex = $("#ejfn").val;

            var add = $("#ewfn").val;

            if (name!= "" && sex!= "" && add!= "") {

                $("#from").attr({ "action": "/mian/getr", "method": "get" });

                $("#from").submit();

            }else{

                alert("输入的值不能为空");

            }

        }

        

</script>

点击提交按钮时form中的数据将会被提交到控制台()

控制台有四种接收方式:

前面以列举了一种方式还有三种在下面一一列举;

2.通过FormCollection类类型 来接收数据;只能接收post提交的数据;

  

 public ActionResult getDat(FormCollection mer)

        {

            string name = mer["name"];

            string sex = mer["sex"];

            string address = mer["address"];

            return Content("姓名"+name+ "<br>" + "性别"+sex+ "<br>" +"地址" +address);

        }

1. 通过Request.Form[“name的属性值”]获取表单数据; 只能接收post提交的数据

  public ActionResult getmer()

        {

            string name = Request.Form["name"];

            string sex = Request.Form["sex"];

            string address = Request.Form["address"];

            return Content(name+sex+address);

        }

1. 通过EntityClass实体类接收数据 可以接收post与get提交的数据;

 public ActionResult getr(mer mer)

        {

            string name = mer.name;

            string sex = mer.sex;

            string add = mer.address;

            return Content(name+sex+add);

        }

        public class mer//这里的mer是类的名字;

        {

            //public string name //成员名称;

            public string name { get; set; }//属性

            public string sex { get; set; }

            public string address { get; set; }

        }