Form表单之get提交与post提交

                                 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提交一样

这是比较简单的写法，当复杂的写法可能就不一样了；