首頁 > web前端 > js教程 > 如何使用 JavaScript/jQuery 存取和序列化表單資料?

如何使用 JavaScript/jQuery 存取和序列化表單資料?

Susan Sarandon
發布: 2024-11-11 03:26:02
原創
191 人瀏覽過

How to Access and Serialize Form Data with JavaScript/jQuery?

使用JavaScript/jQuery 存取表單資料

檢索表單數據,就好像透過經典HTML 方法提交一樣,這可能是一個常見的任務網絡開發。為了實現這一點,JavaScript/jQuery 提供了兩個主要選項:

選項1:使用$('form').serializeArray()

此方法轉換表單資料放入物件的陣列中,每個物件代表一個表單欄位。輸出採用以下格式:

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]
登入後複製

選項 2:使用$('form').serialize()

此方法檢索表單資料為一個字串,格式化為透過POST請求提交:

"foo=1&bar=xxx&this=hi"
登入後複製

捕捉複雜的表單元素

與簡單的輸入欄位不同,表單元素如文字區域、選擇、單選按鈕和複選框需要特定處理。上述兩種方法都能正確處理複雜的表單元素資料。

使用示例

以下代碼演示瞭如何使用這些方法:

// Using serializeArray()
var formDataArray = $('form').serializeArray();

// Using serialize()
var formDataString = $('form').serialize();
登入後複製

演示

請參閱此JSFiddle 示範以查看實際方法:https://jsfiddle.net/

以上是如何使用 JavaScript/jQuery 存取和序列化表單資料?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板