jq表单提交

本文介绍了在ASP.NET MVC中接收表单数据的四种方式:1) 通过形参的方式,2) 使用FormCollection,3) 通过Request.Form,4) 使用EntityClass实体类。详细解释了每种方法的适用场景和使用方法,并提供了示例代码。同时,文章还探讨了GET和POST提交的区别以及表单手动提交的注意事项。

<form action="/Form00/getData" method="post"></for获取表单数据的4种方式:

  1. 通过形参的方式接收表单提交的数据(可以接收postget提交的数据)

-参数之间用“,”逗号隔开;
public ActionResult GetDate(string name,string passWord,string set,string beizhu)
        { 定义参数,参数必须和表单中的属性保持一致,否则无法接收数据;
            string str = name + "." + passWord + "." + set + "." + beizhu;
            return Content(str);     通过string完成字符串的拼接;
        }

2.通过FormCollection来接收表单的数据(只能接收到post提交过来的数据)

public ActionResult PostDate(FormCollection form)
        {
            string name = form["name"];    //属性放在方括号内;
            string passWord = form["passWord"];
            string set = form["set"];
            string beizhu = form["beizhu"];
            var str = name + passWord + set + beizhu;  //字符串的拼接;
            return Content(str);
        }

3.通过 Request.Form["name的属性值"]获取表单数据(只能接收到post提交过来的数据)

语法:Request.Form["属性"];

public ActionResult getDataByRequest()
        {   
string name = Request.Form["name"];
         string sex = Request.Form["sex"];
         string address = Request.Form["address"];
         string str = "3.通过Request.Form来接收表单的数据" + name + "&" + sex + "&" + address;
         return Content(str);
        }

4.EntityClass实体类接收数据(可以接收postget提交的数据)     为常用方法;

public ActionResult Per(Person person)
        {                                       //用 person.属性;的方式获取属性; 
            string name = person.name;            属性必须和表单中的属性保持一致,
            string passWord = person.passWord;    否则无法接收;
            string set = person.set;
            string beizhu = person.beizhu;
            var str = name + passWord + set + beizhu;
            return Content(str);
        }
        //创建实体类;
        public class Person
        {
            public string name { get; set; }
            public string passWord { get; set; }
            public string set { get; set; }
            public string beizhu { get; set; }
        }

 

From表单

HTML表单:用于搜索不同类型的用户输入

 form表单的属性action 与method:
属性 值 描述
action URL(页面链接路径) 规定当提交表单时向何处发送表单数据
method get/post 规定用于发送form-data的HTTP方法。(提交表单的方式)
  在没有定义method的值时,默认的提交方式为get;
method的值 get/post
  get提交时的参数信息直接暴露在URL上。
  与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
  然而,在以下情况中,推荐使用 POST 请求:
     1.无法使用缓存文件(更新服务器上的文件或数据库)
     2.向服务器发送大量数据(POST 没有数据量限制)
     3.发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
get/post区别:
     1.GET方法是用来向服务器上获取数据,而PSOT是用来向服务器上传递修改数据。
     2.GET将表单里的数据添加到action所指向的URL后面,并且两者之间使用”?”连接
    而各个变量之间使用"&"连接;PSOT是将表单中的数据放在form的数据体(FormData)中,
    按照键值对的方式,传递到所指向的action
     3.GET是不安全的,因为在传输过程中,数据被放在请求的url中这样用户可以直接在浏览器上看到提交的数据,假如在设置密码的时候,信息就会暴露在浏览器上面,别人也就能看到,没有安全性可言;
    POST的所有操作对用户来说都是不可见的,数据都在数据体(FormData)中,POST比GET更具有安全性;
     4.GET方法向URL添加数据,URL的长度是受限制的(URL的最大长度是2048个字符),POST提交则无限制
     5.GET方式获取数据后,刷新不会有负面的影响,因为它只是获取数据,
     POST数据会被重新提交可能会产生不良的后果(浏览器应该告知用户数据会被重新提交)
     6.数据类型的限制:GET只允许ASCII字符,POST则无限制(如果提交二进制数据(例如:图片),则需要使用POST方法)
m>
    URL可能的值:
      绝对 URL - 指向其他站点(比如 src="www.baidu.com")
      相对 URL - 指向站点内的文件(比如 src="/Form00/getData")
表单的手动提交
将onsubmit设置为return false可以阻止表单的提交,若不阻止,就算表单内容为空的时候,点击提交按钮,
表单也会进行提交的;
  在表单内容不为空的时候,点击提交,才可以进行提交;
  url的语法:url == "/控制器/方法的名称";
方法如下:

先定义封装方法函数() {
        然后获取元素属性;
 if (name != "" && sex != 0 && address != ""){条件,则在输入框不为空的时候,才提交数据
   var myform = document.getElementById("myform");  //获取整个表单元素属性;
       myform.method = "get";                       //设置提交方式
       myform.action = "/Form/GetData";             //URL提交地址
        myform.submit();                            //表单的提交;                  
        } else {
          alert("数据不完整!");  
            }
        }

以下是几种使用 jQuery 进行自定义表单提交的方法: ### 自定义 action 提交表单 通过点击按钮,设置表单的 action 属性并提交表单。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Custom Form Submit</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <form id="SearchForm" name="SearchForm" method="post"> <input type="text" id="UserCode" placeholder="客户号"> <input type="text" id="Verifycode" placeholder="验证码"> <button id="btn">提交</button> </form> <script> $(function () { $("#btn").click(function () { var usercode = $("#UserCode").val(); var verifycode = $("#Verifycode").val(); if ($.trim(usercode) == "" || $.trim(verifycode) == "") { alert(" 您的[客户号]或者[验证码]必须填写!"); return false; } else { document.SearchForm.action = '/index/Search?u=' + usercode; document.SearchForm.submit(); } }); }); </script> </body> </html> ``` 此方法先获取输入框的值,进行简单验证,若验证通过则设置表单的 action 属性并提交表单[^1]。 ### 利用 AJAX 自定义表单提交 使用 AJAX 提交表单数据,可灵活传参并处理响应。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AJAX Form Submit</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <form id="form_comment"> <input type="text" id="comment" placeholder="请输入评论"> <button type="submit">提交评论</button> </form> <script> $(document).ready(function () { function decodeQuery() { var search = window.location.href; return search.split('=')[1].split('?')[0]; } var taskId = decodeQuery(); $("#form_comment").submit(function (event) { event.preventDefault(); var comment = $('#comment').val(); var data = { "comment": comment }; $.ajax({ url: "/task_mgm/taskinfo_comment=" + taskId, type: "POST", data: JSON.stringify(data), contentType: "application/json", dataType: "json", success: function (resp) { if (resp.error == 'OK') { alert('评论成功'); $('#comment').val(''); } else { alert('评论失败'); } } }); }); }); </script> </body> </html> ``` 该方法通过阻止表单的默认提交行为,使用 AJAX 发送表单数据到指定 URL,并根据响应结果给出提示[^2]。 ### 将表单转为 AJAX 提交表单数据转换为键值对,使用 AJAX 提交。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AJAX Form Submit</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <form id="myForm" action="/submit" method="post"> <input type="text" name="name" placeholder="姓名"> <input type="email" name="email" placeholder="邮箱"> <button type="submit">提交</button> </form> <script> function ajaxSubmit(frm, fn) { var dataPara = getFormJson(frm); $.ajax({ url: frm.action, type: frm.method, data: dataPara, success: fn }); } function getFormJson(frm) { var o = {}; var a = $(frm).serializeArray(); $.each(a, function () { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; } $(document).ready(function () { $('#myForm').submit(function (event) { event.preventDefault(); ajaxSubmit(this, function (response) { console.log(response); }); }); }); </script> </body> </html> ``` 此方法定义了 `ajaxSubmit` 和 `getFormJson` 函数,将表单数据转换为 JSON 对象,使用 AJAX 提交表单,并在成功时执行回调函数[^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值