前言：
在之前的项目中也使用过表单，但是对其的几种数据提交方式还是模棱两可，今天特意的研究了下并在这里记录下来从而加深对该知识点的理解。
1、通过form的onsubmit事件来实现
<form method="post" action="JsSystemFunction.aspx" onsubmit="return vali()" > <div>姓名：<input name="usrerName" /></div> <div>年龄：<input name="age" /></div> <input type="submit" value="提交"/> </form> <div> <div>姓名：<%:HttpContext.Current.Request.Form["usrerName"] %></div> <div>年龄：<%:HttpContext.Current.Request.Form["age"] %></div> </div>
说明：
(1)、form标签的属性介绍
method:提交的方式 post get等
active：提交的地址
(2)onsubmit事件
当点击submit组件时会触发form的onsubmit事件，如果vali()函数返回true时将提交表单否则不提交。在提交表单之前就可以在vali()里面做一些验证，验证通过就返回true,然后提交表单。
效果图如下：
2、通过input类型为submit的onClick事件来实现
<form method="post" action="JsSystemFunction.aspx"> <div>姓名：<input name="usrerName" /></div> <div>年龄：<input name="age" /></div> <input type="submit" value="提交" onclick="return vali"/> </form> <div> <div>姓名：<%:HttpContext.Current.Request.Form["usrerName"] %></div> <div>年龄：<%:HttpContext.Current.Request.Form["age"] %></div> </div>
3、通过button组件的onClick事件，手动提交
以上两种方式都是通过submit来自动触发提交，当不使用submit控件时，就需要手动的提交。以下做出说明：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsSystemFunction.aspx.cs" Inherits="UI.JsSystemFunction" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> </title> <script type="text/javascript"> window.onload = function () { var btn = document.getElementById("sub"); btn.onclick = function () { var form = document.getElementById("form"); form.submit(); }; } </script> </head> <body> <form id="form" method="post" action="JsSystemFunction.aspx"> <div>姓名：<input name="usrerName" /></div> <div>年龄：<input name="age" /></div> <input id="sub" type="button" value="提交" /> </form> <div> <div>姓名：<%:HttpContext.Current.Request.Form["usrerName"] %></div> <div>年龄：<%:HttpContext.Current.Request.Form["age"] %></div> </div> </body> </html>
说明：
当单击button按钮时触发其onclick事件，通过form标签的submit()提交表单数据。这里说要注意的是，相比前面的两种方式，这种方式只要触发了就会提交。
4、异步提交表单数据
常规的表单提交方式会使整个浏览器刷新并重新加载响应，使用ajax方式来异步提交表单数据。然后在使用ajax方式提交表单数据时，通常需要逐个的获取表单元素的值，添加到参数列表中。
serialize()方法能将表单内容序列化成一个键值对的字符串，语法格式如下：
var data=$("form").serialize();
实例：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsSystemFunction.aspx.cs" Inherits="UI.JsSystemFunction" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> </title> <script src="Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#sub").click(function () { $.post("FAjax.ashx", $("form").serialize()); }); }); </script> </head> <body> <form id="form"> <div>姓名：<input name="usrerName" /></div> <div>年龄：<input name="age" /></div> <input id="sub" type="button" value="提交" /> </form> </body> </html>
serializeArray()方法将表单序列化为一个数组，每个数组元素为一个json对象，对应着表单里面的每一个组件。
注：只序列化name属性有值的组件（button 除外）
实例：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsSystemFunction.aspx.cs" Inherits="UI.JsSystemFunction" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> </title> <script src="Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#sub").click(function () { var data = $("form").serializeArray(); $.post("FAjax.ashx",{username:data[0].value,age:data[1].value}) }); }); </script> </head> <body> <form id="form"> <div>姓名：<input name="userName" /></div> <div>年龄：<input name="age" /></div> <input id="sub" type="button" value="提交" /> </form> </body> </html>
