如何使用 JavaScript/jQuery 將表單資料檢索為 JSON 物件？-js教程-PHP中文網

如何使用 JavaScript/jQuery 將表單資料檢索為 JSON 物件？

Linda Hamilton

發布： 2024-11-10 17:19:02

原創

900 人瀏覽過

How to retrieve form data as a JSON object using JavaScript/jQuery?

使用JavaScript/jQuery 擷取表單資料

擷取表單資料時，您可能會尋求一種直接的方法來反映傳統的僅HTML 提交方法。考慮以下形式：

您的目標是從此表單取得下列 JSON 物件：

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}

登入後複製

但是，像下面這樣過於簡化的方法可能無法準確捕獲所有表單元素（例如文字區域、選擇項目、單選按鈕和複選框）：

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});

登入後複製

解決方案： $('form').serializeArray()

幸運的是，jQuery 提供了$ ('form').serializeArray() 方法，傳回包含每個表單的名稱和值的物件陣列元素：

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

登入後複製

替代選項：$('form').serialize()

如果您喜歡表單資料的字串表示形式，可以使用$('form').serialize()，返回URL 編碼的string:

"foo=1&bar=xxx&this=hi"

登入後複製

有關現場演示，請參閱提供的jsfiddle 演示。

以上是如何使用 JavaScript/jQuery 將表單資料檢索為 JSON 物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！