Form表单之get提交与post提交
Form表单的属性action 与method：
属性 值 描述
action URL
method get/post 规定用于发送form-data的HTTP方法。（提交表单的方式）
<form action="/Form00/getData" method="post"></form>
URL可能的值：
绝对 URL — 指向其它站点（如：src="www.baidu.com"）
相对URL — 指向站点内的文件（如：scr="/Form00/getData"）
method的值 get/post
一.两种方法的优势：
1. get ：
（1）get方式获取数据后，刷新不会有负面的效果，它只是获取数据
（2）相对于 post ，get提交更加简单和更快
2. post ：
（1）post提交是无限制的
（2）post提交时不会暴露在URL上
（3）post没有数据类型的限制
（4）post是安全的，因为post的所有操作对用户来说都是看不到的，因为数据都在数据中（FormData）中
（5）相对于 get ，post 更加稳定更可靠
（6）无法使用缓存文件（更新服务器上的文件或数据库）用 post 请求
（7）向服务器发送大量数据
（8）发送包含未知符号的用户或者不想让别人看到的时
二. 两种方法的劣势：
1. get
（1）get 方法向URL添加数据时，URL的长度是有一定限制的；get有数据类型的限制，get只允许ASCll字符
（2）get是不安全的，在传送数据时，数据被放在请求的URL中，用户可以直接在游览器上直接看到提交的数据；get提交时参数会直接暴露在URL上
2.post
（1）post数据会被重新提交时可能会产生不良的后果
（2）post 相对于get来说，慢和复杂
三.两种方式的公共代码：
控制器代码↓↓
public class MainController : Controller
{
// GET: Main
public ActionResult Index()
{
return View();
}
public ActionResult GetData(string name,string sex,string address)
{
string str = name + sex + address;
return Content(str);
}
}视图中div代码↓↓
<div class="container m-5">
@*onsubmit="return false;" 禁用表单的自动提交方式*@
<form id="frm" autocomplete="off" @*action="/Main/GetData" method="post"*@ onsubmit="return false;">
<div class="form-group form-row">
<label class="col-form-label col-3 text-center">姓名</label>
<input class="form-control col-9" id="txtName" type="text" name="name" />
</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="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>
效果图 ↓↓
四.Form表单之get提交；
get提交代码如下：
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");
form.action = "/Main/GetData";
form.method = "get";
form.submit();
} else {
alert("表单填写的数据不能为空，请检查");
}
}如上：上面就是，get提交的代码；
当我们 运行时，没填写或者漏填写时，它会出现下面这样的结果
报错，也是一种提醒；
当你全部都填写时，如下
那结果就会这样：
上面便是get提交了
五.Form表单之post提交：
代码如下
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 != "") {
var form = document.getElementById("frm");
form.action = "/Main/GetData";
form.method = "post";
form.submit();
} else {
alert("表单填写的数据不能为空，请检查");
}
}这个写法跟上面get表单提交差不多，就是改了个单词而已，
把 getData() 改成了 postData()
把 form.method = "get"; 改成了 form.method = "post";
这样就成了一个post提交，当然效果也一样，跟get提交一样
这是比较简单的写法，当复杂的写法可能就不一样了；
