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

使用JavaScript/jQuery 擷取表單資料

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

`

<input type="radio" name="foo" value="1" checked="checked" />
<input type="radio" name="foo" value="0" />
<input name="bar" value="xxx" />
<select name="this">
    <option value="hi" selected="selected">Hi</option>
    <option value="ho">Ho</option>

`

您的目標是從此表單取得下列 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中文網其他相關文章！