Form表单提交

form表单提交，表单提交分两种：自动提交和手动提交，

form表单提交又分：post提交和get提交，以下用的都是post提交

一.自动提交表单：

自动提交表单，我们可以通过框架引用；

不多说，代码如下：

<html>
<head><meta name="viewport" content="width=device-width" /><title>Index</title><link href="~/Content/bootstrap-4.5.3-dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body><div class="container mt-5"><form action="/" method="post"><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="reset" class="btn btn-outline-danger ">Reset重置</button></div></form></div><script src="~/Content/js/jquery-3.2.1.min.js"></script><script src="~/Content/bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</body>
</html>

如上，我写的是自动提交表单的！效果如下

当我们点击表单提交时，会产生一种像刷新网页一样的效果，但是它的是表单提交，不过它会产生一种清空的效果，

因为它把内容提交到一个 action="/" ;action="/"，本应该在里面应该填写一个地址，不过我这里没写，只是拿 / 代替而已；

action 规定当提交表单时，向何处发送表单数据。

当我们点击Reset重置时，它只是重置表单，它也会产生一种清空的效果，但是不会产生一种像刷新网页一样的效果！！它只是起到重置表单而已；

二.手动提交表单：

手动提交表单的代码大概跟自动提交表单差不多，不过还是有区别的；

比如，我们要将下面这段代码改了：

        <form action="/" method="post">

改成下面这样↓↓

<form id="frm" autocomplete="off" @*action="/Main/GetData" method="post"*@ onsubmit="return false;">

οnsubmit="return false;" 禁用表单的自动提交；

还有我这里要写手动提交表单；还要改；

<div class="form-group form-row"><button type="submit" class="btn btn-outline-primary offset-3 mr-2">表单提交</button><button type="reset" class="btn btn-outline-danger ">Reset重置</button>
</div>

将上面的改成下面这样的

<div class="form-group form-row"><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>

我们还要写一个<script></script>与添加一个新的控制器；

<script></script>如下

<script>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("表单填写的数据不能为空，请检查");}}</script>

控制器如下

 public ActionResult  GetData(string name,string sex,string address){string str = name + sex + address;return Content(str);}

控制器详细代码如下：

    public class MainController : Controller{// GET: Mainpublic ActionResult Index(){return View();}public ActionResult  GetData(string name,string sex,string address){string str = name + sex + address;return Content(str);}}

action 与method是form表单的两个属性：

action 规定当提交表单时向何处发送表单数据

method （get/post）规定用于发送form-data的HTTP方法。(提交表单的方式)