表單用來接受用戶的輸入，并將用戶的輸入以“name=value值對”集合的形式提交到服務器進行處理。那么表單是怎樣將數(shù)據(jù)提交到服務器的？服務器是怎樣對表單數(shù)據(jù)進行處理的？下面我將為大家揭開表單提交背后的秘密


表單用<form></form> 標記定義，表單里面放置各種接受用戶輸入的控件

[html]view plaincopy

<formid="login"name="login"method="get"action="Get.aspx">

<p>用戶名：<inputid="txtUserName"name="txtUserName"type="text"/></p><!--用戶名文本框-->
<p>密　碼：<inputid="txtPWD"name="txtPWD"type="text"/></p><!--密碼文本框-->
<p><inputid="subLogin"name="subLogin"type="submit"value="提交"/></p><!--提交按鈕-->

</form>

首先我們來看一下表單form的一些屬性

1、id：表單的唯一標識

2、name：表單的名字

3、method：定義表單提交的方法，有兩種方法：Post方法和Get方法

4、action：用于處理表單的服務器端頁面（以URL 形式表示）

表單中的控件有兩個屬性是非常重要的：name屬性和value屬性，每一個控件的這兩個屬性將構成“name-value對”提交到action屬性所定義的頁面進行處理

前邊講到表單提交有兩種方法：post和get，那么這兩種方法有什么區(qū)別呢？

1、post方法

用這種方法提交的表單，數(shù)據(jù)將以數(shù)據(jù)塊的形式提交到服務器，表單數(shù)據(jù)不會出現(xiàn)在URL中，所以用這種方式提交的表單數(shù)據(jù)是安全的。如果表單數(shù)據(jù)中包含類似于密碼等數(shù)據(jù)，建議使用post方法


用post方法提交數(shù)據(jù)的表單：

[html]view plaincopy

<formid="login"name="login"method="Post"action="Post.aspx">

<p>用戶名：<inputid="txtUserName"name="txtUserName"type="text"/></p><!--用戶名文本框-->
<p>密　碼：<inputid="txtPWD"name="txtPWD"type="text"/></p><!--密碼文本框-->
<p><inputid="subLogin"name="subLogin"type="submit"value="提交"/></p><!--提交按鈕-->

</form>

瀏覽器中效果




處理表單的Post.aspx頁面代碼

[csharp]view plaincopy

protectedvoidPage_Load(objectsender,EventArgse)
{

stringstrUserName=Request.Form["txtUserName"];
stringstrPWD=Request.Form["txtPWD"];

if(strUserName=="張三"&&strPWD=="123456")
{
Response.Write(strUserName+"登錄成功！");
}
else
{
Response.Redirect("Login.htm");
}

}

運行的結果




由以上代碼可知，服務器端頁面接收表單數(shù)據(jù)所用的方法是Request.Form["表單控件的name屬性"]，接收到數(shù)據(jù)后便可以進行處理，然后返回結果


2、Get方法

這是發(fā)送表單數(shù)據(jù)的默認方法，這種方法會以 “?name1=value1&name2=value2”的形式，將表單數(shù)據(jù)附加到URL的后面，提交到服務器處理，這種方法安全性當然不如post方法，因為表單數(shù)據(jù)會暴露在URL中，但是它的處理效率要比post方法高。如果表單中的數(shù)據(jù)沒什么隱私數(shù)據(jù)，建議使用get方法，它的效率較高

用get方法提交數(shù)據(jù)的表單：

[html]view plaincopy

<formid="login"name="login"method="get"action="Get.aspx">

<p>用戶名：<inputid="txtUserName"name="txtUserName"type="text"/></p><!--用戶名文本框-->
<p>密　碼：<inputid="txtPWD"name="txtPWD"type="text"/></p><!--密碼文本框-->
<p><inputid="subLogin"name="subLogin"type="submit"value="提交"/></p><!--提交按鈕-->

</form>

處理表單的Get.aspx頁面代碼

[csharp]view plaincopy

protectedvoidPage_Load(objectsender,EventArgse)
{
stringstrUserName=Request.QueryString["txtUserName"];
stringstrPWD=Request.QueryString["txtPWD"];

if(strUserName=="張三"&&strPWD=="123456")
{
Response.Write(strUserName+"登錄成功！");
}
else
{
Response.Redirect("Login.htm");
}


}

運行結果：




由以上代碼可知，服務器端頁面接收表單數(shù)據(jù)所用的方法是Request.QueryString["表單控件的name屬性"]，接收到數(shù)據(jù)后便可以進行處理，然后返回結果


那么我們在用VS編程的時候會發(fā)現(xiàn)，aspx頁面的表單并沒有指定action屬性，那么它的 表單由哪個頁面處理呢？aspx頁面的表單默認是由本頁面處理的，當然你也可以指定由其他aspx頁面處理

在html中：name指的是用戶名稱,ID指的是用戶注冊是系統(tǒng)自動分配給用戶的一個序列號。
name是用來提交數(shù)據(jù)的，提供給表單用，可以重復；
id則針對文檔操作時候用，不能重復。如：document.getElementById()；
一、ID是在客戶端腳本里用!NAME是用于獲取提交表單的某表單域信息，在form里面,如果不指定Name的話,就不會發(fā)送到服務器端。
二、以下元素input、select、form、frame、iframe用name，而以下元素table、tr、 td、div、p、span、h1、li用id，表單元素(form input textarea select)與框架元素(iframe frame)用 name，這些元素都與表單(框架元素作用于form的target)提交有關, 在表單的接收頁面只接收有name的元素, 賦ID的元素通過表單是接收不到值的. 
當然上述元素也可以賦ID值, 賦ID值的時候引用這些元素的方法就要變一下了. 
賦 name: document.formName.inputName        document.frames("frameName") 
賦 ID    : document.all.inputID                      document.all.frameID 
只能賦ID不能賦name的元素:(除去與表單相關的元素都只能賦ID) 
body li a table tr td th p div span pre dl dt dd font b 等等
舉個簡單的例子 
<form name="form1"> 
用戶名：<input type=text name="username" id="username"> 
密碼：<input type=password name="password" id="pwd"> 
</form> 
如果我要獲得用戶名和密碼;JS用name獲得的話，就得寫成document.form1.username.value; 
document.form1.password.value; 
用id獲得： 
docuement.getElementById("username"); 
docuement.getElementById("pwd"); 
有時候name 可能會出現(xiàn)相同的名字，所以這時候我們用name獲得就無法確定獲得的是哪個值了。 
document.getElemntsByName("username"); 
這里得到的是一個數(shù)組

document.getElementsByName(xxx); 取出的數(shù)組 
document.getElementById(xxx); 取出是單個對象

還有需要注意的
有些元素 比如 div 可以用 id名字直接得到對象 
<div id="div1"></div> 
div1.innerHTML = "asdfasdf";
而表單元素 就不可以這樣了 
只能用 document.getElementById(xx)

總結

以上是生活随笔為你收集整理的表单提交Post方法、Get方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。