淘气的小丁-JavaScript的两种表单提交的方式

JavaScript的两种表单提交的方式

首先给页面布局因为是表单提交所以我们要先写好一个表单。

1. 我们用bootstrap来布局就不用写样式，所以我们先引入bootstrap框架，放一个div类名为container，再在里面写form表单，在表单里我们先放四个div分别放姓名，性别和地址还有按钮，并且给他们两个相同的类为form-group form-row，有了这两个类就把样式都写好了。
2. 在每个的div中放一个label标签（除了放按钮的div），我们把文本放在label标签内，并且给label标签三个相同的类form-check-label col-1 text-center。
3. 在姓名的div内再放一个input标签，让它里面的type属性为text，name属性为name，id为name，class为form-control col-11。
4. 在性别的div内再放一个select标签，让它里面的name属性为sex，id为sex，class为form-control col-11，在select标签里面放三个option标签，里面的文本分别为请选择，男，女，并且他们对应的value值分别为0，男，女。
5. 在地址的div内再放一个text area标签，让它里面的name属性为address，id为address，class为form-control col-11。
6. 在最后一个div内再放四个button标签，第一个button标签里面的文本为submit，而标签上的type属性为submit，class属性为btn btn-outline-primary mr-2，第二个button标签里面的文本为get，而标签上的type属性为button，class属性为btn btn-outline-danger mr-2，第三个button标签里面的文本为button，而标签上的type属性为button，class属性为btn btn-outline-secondary mr-2，最后一个button按钮的文本为reset，而标签上的type属性为reset，class属性为btn btn-outline-success mr-2。
7. 到这我们的页面已经布置好了，接下来就开始打JavaScript了。

8. 

 

1. 我们先写手动提交的第一种方式get提交，我们先封装一个函数aaGet，为了让代码简洁我们获取值就用jQuery的方法，先声明三个变量a,b,c分别来装所获取的姓名，性别和地址的值。
2. 我们再来做一个判断，条件为a不等于空，b不等于0，c不等于空，然后我们把要写的代码写在里面，用get方式提交有两种方法：①通过形参的方式接收表单提交的数据；②通过EntityClass实体类接收提交的数据。而用post方式提交有四种，①通过形参的方式接收表单提交的数据②通过FormCollection来接收表单的数据③通过 Request.Form["name的属性值"]获取表单数据④.EntityClass实体类接收数据
3. 我们先写一下四种提交方法。

• 通过形参的方式接收表单提交的数据：（get与post）

public ActionResult stringGetPost1(string name,string sex,string address)

 {

  string str = "你好，我叫" + name + "，性别" + sex + "家在"+ address;

  return Content(str);

  }

• 通过FormCollection来接收表单的数据：（post）

public ActionResult stringPost1(FormCollection aa)

        {

            string name = aa["name"];

            string sex = aa["sex"];

            string address = aa["address"];

            string str = "你好，我叫" + name + "，性别" + sex + "家在" + address;

            return Content(str);

        }

• 通过 Request.Form["name的属性值"]获取表单数据：（post）

public ActionResult stringPost2()

        {

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

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

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

            string str = "你好，我叫" + name + "，性别" + sex + "家在" + address;

            return Content(str);

        }

• .EntityClass实体类接收数据：（get与post）

public ActionResult stringGetPost2(Aa a)

        {

            string name = a.name;

            string sex = a.sex;

            string address = a.address;

            string str = "你好，我叫"+ name + "，性别" + sex + "家在" + address;

            return Content(str);

        }

        public class Aa

        {

            //public string name;//成员变量

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

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

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

 

        }

11.我们把四种方法都写出来了，现在我们就来写提交的代码，首先我们要获取这个表单，给他的action属性赋值：document.getElementById("form").action = "/work/stringGetPost2";再来给他的method属性赋值：document.getElementById("form").method = "get";最后在点一个submit的方法，这样就可以提交了。注：action是写提交的地址，method是写提交的方式，submit是提交。我们现在用的是第四种方法接收数据，它也可以用第一种方法接收。

12.写完get提交现在来写post提交，我们再来封装一个函数bbPost，和写get方式一样，只是把method的值改成post就好了，再加上四种方法接收，post提交就写完了。