開發問題描述:
今天在寫一個提交表單的程序的時候,由於提交數據比較多,而且需要採用ajax無跳轉方式提交,所以就採用了一種比較快捷的方式,序列化表單,數據提交成功,但是心裡有點疑惑,序列化後的表單為什麼可以直接提交給php後臺,而且後臺也能很方便的接收.?
序列化後的表單的數據結構
以上就是該表單通過jQuery序列化後的結果,雖然這樣能夠很方便的提交大量表單數據,但是就是想不通,為什麼這樣一個字符序列能夠直接提交給後臺
為了搞清楚這個問題,於是在網上查閱了很多資料,並通過幾次嘗試,基本上搞清了,其中的原理, 要理解這個原理,首先要知道表單提交的過程. 下面著重分析下表單提交的過程(不含文件上傳部分)
表單提交過程如下
(1)確定有效控件
在這個過程中,瀏覽器,需要判斷待提交表單中,哪些控件是有效控件,哪些控件是無效控件,所謂有效控件就是指,後臺能夠被後臺獲取值的控件,具體的分析,已經在上一篇文章中詳細描述過,這裡就不在贅述了.
(2)獲取控件數據
第(1)完成之後,瀏覽器就需要收集有效控件的值,並將其組織成 name=value的形式 多個值之間用 &號分開,其結構類似於
name1=value1&name2=value2&name3=value3的形式.
(3)對數據進行編碼
表單對數據的編碼方式有很多種,常用主要有兩種
<1> application/x-www-form-urlencoded
這是表單默認的提交方式,也就是在設置表單編碼方式的情況下,表單提交時會默認採用這種網址編碼形式,對錶單數據進行提交
具體案例分析如下:
這裡是採用原生的form進行提交,而非ajax提交方式,從中分析,可以看到,當點擊提交按鈕後,表單確實是被轉換成了一段name=value類型的鍵值對,而且中間用&符號隔開,通過對比可以發現,這個結果和jQuery序列化表單的結果是相同的,
這樣就很明白了,所謂的序列化表單就是使用了js收集表單數據後,通過拼接組裝,已達到模擬原生表單提交數據的效果,
需要注意的是,這種編碼方式,只能用於普通的鍵值對錶單提交,而不能用於文件上傳,
<2>multipart/form-data編碼方式
這種編碼方式,主要是用來實現文件上傳而設置的,它會文件以二進制的形式,放置於請求體中,分段發送給服務器,需要注意的是使用該編碼方式時,表單的提交方式必須設置為 method=post,由於時間關係,這裡就暫時不放案例了,後續文章會繼續介紹.
(4)發送數據
最後一步就是將組裝好的數據,根據表單的action所指示的服務器地址,進行發送,服務器接收到數據後,根據相關參數,返回客戶端所需數據
以上就是個人所理解的表單提交過程,僅供參考,如有不全或不當之處,歡迎評論,指出,交流學習!!
