Bagaimana untuk mendapatkan data borang sebagai objek JSON menggunakan JavaScript/jQuery?

Mengambil Data Borang dengan JavaScript/jQuery

Apabila menangkap data borang, anda boleh mendapatkan pendekatan mudah yang mencerminkan penyerahan HTML sahaja tradisional kaedah. Pertimbangkan borang berikut:

`

<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>

`

Matlamat anda adalah untuk mendapatkan objek JSON berikut daripada borang ini:

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

Walau bagaimanapun, pendekatan yang terlalu dipermudahkan seperti berikut mungkin tidak menangkap semua elemen bentuk dengan tepat (seperti kawasan teks, pilihan, butang radio dan kotak pilihan):

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

Penyelesaian: $('form').serializeArray()

Mujurlah, jQuery menyediakan kaedah $('form').serializeArray() , yang mengembalikan tatasusunan objek yang mengandungi nama dan nilai setiap borang elemen:

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

Pilihan Alternatif: $('form').serialize()

Jika anda lebih suka perwakilan rentetan data borang, anda boleh menggunakan $('form').serialize(), yang mengembalikan rentetan berkod URL:

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

Untuk demonstrasi langsung, rujuk demo jsfiddle yang disediakan.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan data borang sebagai objek JSON menggunakan JavaScript/jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!