JavaScript的两种表单提交的方式
首先给页面布局因为是表单提交所以我们要先写好一个表单。
- 我们用bootstrap来布局就不用写样式,所以我们先引入bootstrap框架,放一个div类名为container,再在里面写form表单,在表单里我们先放四个div分别放姓名,性别和地址还有按钮,并且给他们两个相同的类为form-group form-row,有了这两个类就把样式都写好了。
- 在每个的div中放一个label标签(除了放按钮的div),我们把文本放在label标签内,并且给label标签三个相同的类form-check-label col-1 text-center。
- 在姓名的div内再放一个input标签,让它里面的type属性为text,name属性为name,id为name,class为form-control col-11。
- 在性别的div内再放一个select标签,让它里面的name属性为sex,id为sex,class为form-control col-11,在select标签里面放三个option标签,里面的文本分别为请选择,男,女,并且他们对应的value值分别为0,男,女。
- 在地址的div内再放一个text area标签,让它里面的name属性为address,id为address,class为form-control col-11。
- 在最后一个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。
- 到这我们的页面已经布置好了,接下来就开始打JavaScript了。
- 我们先写手动提交的第一种方式get提交,我们先封装一个函数aaGet,为了让代码简洁我们获取值就用jQuery的方法,先声明三个变量a,b,c分别来装所获取的姓名,性别和地址的值。
- 我们再来做一个判断,条件为a不等于空,b不等于0,c不等于空,然后我们把要写的代码写在里面,用get方式提交有两种方法:①通过形参的方式接收表单提交的数据;②通过EntityClass实体类接收提交的数据。而用post方式提交有四种,①通过形参的方式接收表单提交的数据②通过FormCollection来接收表单的数据③通过 Request.Form["name的属性值"]获取表单数据④.EntityClass实体类接收数据
- 我们先写一下四种提交方法。
- 通过形参的方式接收表单提交的数据:(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提交就写完了。