新增的提交方法——form表单

一、视图层代码如下:

使用到插件

    <link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />bootstrap的样式
    <script src="~/Content/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>提交时用到的插件

html代码

    <div class="container">
       <form class="form-horizontal" id="myform">     第一种 ,form表单默认用post提交
       <form class="form-horizontal" action="/formAction1"  method="post">    第二种
        <form class="form-horizontal" action="/getAction" method="get">    第三种
                <div class="form-group">
                    <label class="control-label col-md-3">姓名:</label>
                    <div class="col-md-4">
                        <input class="form-control" type="text" value="" name="txtName" id="txtName" />
                    </div>
                </div>
                 <div class="form-group">
                    <label class="control-label col-md-3">年龄:</label>
                    <div class="col-md-4">
                        <input class="form-control" name="Age" id="Age"></input >
                    </div>
                </div>
                 <div class="form-group">
                    <label class="control-label col-md-3">专业:</label>
                    <div class="col-md-4">
                        <input class="form-control" name="Specialty" id="Specialty"></input >
                    </div>
                </div>
                 <div class="form-group">
                    <label class="control-label col-md-3">学历:</label>
                    <div class="col-md-4">
                        <input class="form-control" name="Education" id="Education"></input >
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3">地址:</label>
                    <div class="col-md-4">
                        <textarea class="form-control" name="txtAddress" id="txtAddress"></textarea>
                    </div>
                </div>
                <div class="form-group">
                  <button class="btn btn-primary col-md-offset-4"  id="btnSubmit">表单提交</button>  第一种 
                 <button class="btn btn-primary col-md-offset-4" type="submit" >表单提交</button>   第一 、二种
                </div>
            </form>
    </div>

第一、知识要点form表单的属性action 与method

属性 描述
action URL 规定当提交表单时向何处发送表单数据
method get/post 规定用于发送 form-data 的 HTTP 方法。(提交表单的方式)

第二、知识要点URL的值

URL 例子
绝对 URL 指向其他站点(比如 src=“www.baidu.com”)
相对URL 指向站点内的文件(比如 src="/jQueryAjax/formAction")

第三、get和post的提交利与弊

get提交时参数直接暴露在URL上, 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠 ‘
get/post区别:
1、Get方法是用来向服务器上获取数据,
而Post是用来向服务器上传递修改数据。
2、Get将表单里的数据添加到action所指向的URL后面,
并且两者之间使用”?”连接,而各个变量之间使用”&”连接;
Post是将表单中的数据放在form的数据体中,按照变量和值对象的方式,传递到所指向的action.
3、Get是不安全的,因为在传输过程中,数据被放在请求的Url中,这样,用户可以直接在浏览器上看到提交的数据,一些系统内部信息也一同显示在用户面前。
Post的所有操作对用户来说都是不可见的。
4、Get传输的数据量小,主要是受限与于Url长度限制,其中IE浏览器对URL的最大限度为2083个字符(http://hqlong.com/2009/12/1164.html)。
而post可以的传输大量的数据,所以在上传文件和大数据量时使用post。
5、Form提交默认为Get方法提交。
6、Get方式获取数据后,刷新不会有负面的影响,因为它只是获取数据,而Post方法刷洗页面重复提交可能会产生不良的后果。

js的代码

       //第一种提交方法
       $("#btnSubmit").click(function () {
         $("#myform").attr({ "method": "post", "action": "/jQueryAjax/formAction" });
       });
       //第二、第三种的提交方法
           $("#submit").click(function () {
           //获取页面文本的值:jQuery的写法
            var txtName = $('#myform [name="txtName"]').val();   
            var Age= $('#myform [name="Age"]').val();
            var Specialty= $('#myform [name="Specialty"]').val();
            var Education= $('#myform [name="Education"]').val();
           var txtAddress = $('#myform [name="txtAddress"]').val();
           if (txtName != '' && Age != '' && Specialty!= '' && Education!= '' && txtAddress !='') {
               $("#myform").ajaxSubmit(function (msg) {
                   if (msg == "") {
                       alert("新增成功!")
                   } else {
                       alert("新增失败!")
                   }
               })
           } else {
               alert("数据不完整,请填写完整数据!")
           }
       });
       注意:有时用form表单提交数据是会自动提交数据
        //取消form表单的自动提交
       $(document).ready(function () {
           $("#form").submit(function () {
               return false;
          });
       })

二、控制层代码如下:

 一、提交方式为post
    这里需要注意:form表的里面name值一定和数据库Y_Sendfor  的每一个值相同
    public ActionResult InserSend(Y_Sendfor  record)
       {
      string strMsg = "新增失败";
           try
           {
               myModel.Y_Sendfor.Add(record);
               myModel.SaveChanges();
               strMsg = "success";
           }
           catch (Exception e)
           {
               Console.WriteLine(e);
               strMsg = "新增失败!";
           }
           return Json(strMsg, JsonRequestBehavior.AllowGet);
       }

二、提交方式get

  public ActionResult getAction(string txtName,string Age,string Specialty,string Education,string txtAddress)
       {
          string stmsg = "";
           try
           {
               Y_Sendfor pwUserRoleDetail = new Y_Sendfor();//初始化需要添加数据的表格
               pwUserRoleDetail.txtName= txtName;
               pwUserRoleDetail.Age= Age;
               pwUserRoleDetail.Specialty= Specialty;
               pwUserRoleDetail.Education= Education;
               pwUserRoleDetail.txtAddress= txtAddress;
               myModels.Y_Sendfor.Add(pwUserRoleDetail);
               myModels.SaveChanges();
               strmsg = "新增数据成功!";
           }
           catch (Exception)
           {
                        string stmsg = "新增失败"; 
           }
            return Json(stmsg, JsonRequestBehavior.AllowGet);
           }

三、 第一种:FormCollection form

  一、注意:FormCollection用来在controller中获取页面表单元素的数据 (from表单默认用post提交)
    public ActionResult getAction(FormCollection form)
          {
           string stmsg = "";
            try
            {
               Y_SendforpwUserRoleDetail = new Y_Sendfor();//初始化需要添加数据的表格
               pwUserRoleDetail.txtName= form["txtName"];
               pwUserRoleDetail.Age= form["Age"];
               pwUserRoleDetail.Specialty= form["Specialty"];
               pwUserRoleDetail.Education= form["Education"];
               pwUserRoleDetail.txtAddress= form["txtAddress"];
               myModels.Y_Sendfor.Add(pwUserRoleDetail);
               myModels.SaveChanges();
               strmsg = "新增数据成功!";
             }
            catch (Exception)
            {
                         string stmsg = "新增失败"; 
            }
             return Json(stmsg, JsonRequestBehavior.AllowGet);
            }
温馨提示:初次做知识点的总结,有不足之区。请大神指点,谢谢!
发布了37 篇原创文章 · 获赞 8 · 访问量 5968

猜你喜欢

转载自blog.csdn.net/weixin_43741599/article/details/87890035
今日推荐