Rumah > hujung hadapan web > tutorial js > Bagaimana Mendapatkan Data Borang Menggunakan JavaScript dan jQuery?

Bagaimana Mendapatkan Data Borang Menggunakan JavaScript dan jQuery?

Susan Sarandon
Lepaskan: 2024-11-12 02:03:02
asal
308 orang telah melayarinya

How to Get Form Data Using JavaScript and jQuery?

Mendapatkan Data Borang dengan JavaScript/jQuery

Apabila bekerja dengan borang, selalunya timbul keperluan untuk mendapatkan semula data yang terkandung di dalamnya secara pemrograman. Data ini boleh digunakan untuk pemprosesan lanjut, pengesahan atau penghantaran ke pelayan. Nasib baik, menggunakan JavaScript dan jQuery, mendapatkan data ini adalah proses yang mudah.

Kaedah serializeArray() jQuery

Satu kaedah yang cekap dan mudah untuk mendapatkan data daripada borang adalah menggunakan kaedah serializeArray() jQuery. Kaedah ini mengembalikan tatasusunan objek, dengan setiap objek mewakili elemen input dalam bentuk. Setiap objek mengandungi nama elemen dan sifat nilai.

Untuk menggunakan kaedah ini, hanya gunakan ia pada pemilih borang:

var data = $('form').serializeArray();
Salin selepas log masuk

Susun atur data akan mengandungi objek seperti berikut:

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]
Salin selepas log masuk

Kaedah serialize() jQuery

Pilihan lain ialah untuk menggunakan kaedah serialize() jQuery, yang mengembalikan rentetan. Rentetan ini mewakili data borang dalam format yang diterima oleh penyerahan borang HTML tradisional.

Untuk menggunakan kaedah ini, hanya gunakannya pada pemilih borang:

var data = $('form').serialize();
Salin selepas log masuk

Pembolehubah data akan mengandungi rentetan seperti berikut:

"foo=1&bar=xxx&this=hi"
Salin selepas log masuk

Demo

Untuk melihat kaedah ini dalam tindakan, lihat biola berikut: https://jsfiddle.net/w84ny75L/

Atas ialah kandungan terperinci Bagaimana Mendapatkan Data Borang Menggunakan JavaScript dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan