Form表单提交

最新推荐文章于 2024-03-18 22:46:45 发布

我，休伯利安舰长

最新推荐文章于 2024-03-18 22:46:45 发布

阅读量5.7k

点赞数

文章标签： javascript web

本文链接：https://blog.csdn.net/weixin_49757916/article/details/117262767

版权

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: Main
        public 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方法。(提交表单的方式)