Lebih
jQuery AJAX submit form
Saya punya form dengan nama orderproductForm
dan terdefinisi jumlah input.
Saya ingin melakukan beberapa jenis jQuery.mendapatkan atau ajax atau sesuatu seperti itu yang akan memanggil halaman melalui Ajax, dan mengirim bersama semua input dari form orderproductForm
.
Saya kira salah satu cara untuk melakukan sesuatu seperti
jQuery.get("myurl",
{action : document.orderproductForm.action.value,
cartproductid : document.orderproductForm.cartproductid.value,
productid : document.orderproductForm.productid.value,
...
Namun saya tidak tahu persis semua form input. Apakah ada fitur, fungsi atau sesuatu yang hanya akan mengirim SEMUA form input?
880
18
Ini adalah referensi sederhana:
Saya berharap hal ini membantu anda.
Anda dapat menggunakan ajaxForm/ajaxSubmit fungsi dari Ajax Form Plugin atau jQuery cerita bersambung fungsi.
AjaxForm:
atau
ajaxForm akan mengirimkan ketika tombol submit ditekan. ajaxSubmit mengirimkan segera.
Cerita bersambung:
AJAX serialisasi dokumentasi di sini.
Lain yang serupa solusi menggunakan atribut yang didefinisikan pada bentuk elemen:
Ada beberapa hal yang perlu anda perhatikan.
1. Ada beberapa cara untuk mengirimkan formulir
Oleh karena itu kita harus mengikat kirim formulir acara, bukan klik tombol acara. Ini akan memastikan kode kita bekerja pada semua perangkat dan teknologi pendukung, sekarang dan di masa depan.
2. Hijax
Pengguna mungkin tidak memiliki JavaScript diaktifkan. A hijax pola lebih baik di sini, di mana kita lembut mengambil kendali dari form menggunakan JavaScript, tapi biarkan submittable jika JavaScript gagal.
Kita harus menarik URL dan metode dari bentuk, sehingga jika perubahan HTML, kita don't perlu memperbarui JavaScript.
3. JavaScript
Menggunakan acara tersebut.preventDefault() bukan return false adalah praktik yang baik karena memungkinkan acara untuk bubble up. Hal ini memungkinkan skrip lain dasi ke acara tersebut, misalnya analytics script yang dapat memantau interaksi pengguna.
Kecepatan
Kita idealnya harus menggunakan skrip eksternal, daripada memasukkan script kami inline. Kita dapat link ini pada bagian head dari halaman menggunakan tag script, atau link untuk itu di bagian bawah halaman untuk kecepatan. Naskah harus diam-diam meningkatkan pengalaman pengguna, tidak mendapatkan di jalan.
Kode
Dengan asumsi anda setuju dengan semua hal di atas, dan anda ingin menangkap menyerahkan acara, dan menanganinya melalui AJAX (a hijax pola), anda bisa melakukan sesuatu seperti ini:
Anda dapat secara manual memicu formulir pengajuan kapanpun yang anda suka melalui JavaScript menggunakan sesuatu seperti:
Edit:
Baru-baru ini saya telah melakukan ini dan akhirnya menulis sebuah plugin.
Tambahkan data-autosubmit atribut untuk tag form dan anda kemudian dapat melakukan hal ini:
HTML
JS
Anda juga dapat menggunakan FormData (Tetapi tidak tersedia di IE):
Ini adalah cara yang anda gunakan FormData.
Versi sederhana (tidak mengirim gambar)
Copy dan paste ajaxification dari bentuk atau semua bentuk pada halaman
Ini adalah versi modifikasi dari Alfrekjv's jawaban
JavaScript
Saya ingin mengedit Alfrekjv's jawaban tetapi menyimpang terlalu jauh dari itu sehingga memutuskan untuk posting ini sebagai jawaban yang terpisah.
Tidak mengirim berkas, tidak mendukung tombol, misalnya mengklik suatu tombol (termasuk tombol kirim) mengirimkan nilai sebagai data formulir, tapi karena ini adalah permintaan ajax tombol klik tidak akan dikirim.
Untuk mendukung tombol anda dapat menangkap aktual klik tombol alih-alih menyerahkan.
Pada sisi server, anda dapat mendeteksi ajax request dengan header yang jquery set
HTTP_X_REQUESTED_WITH
untuk phpPHP
Kode ini bekerja bahkan dengan file input
Aku benar-benar menyukai jawaban ini oleh superluminary dan terutama cara dia dibungkus adalah solusi dalam jQuery plugin. Jadi terima kasih untuk superluminary untuk waktu yang sangat berguna menjawab. Dalam kasus saya, meskipun, saya ingin sebuah plugin yang akan memungkinkan saya untuk menentukan sukses dan kesalahan event handler dengan cara pilihan ketika plugin diinisialisasi.
Jadi di sini adalah apa yang saya datang dengan:
Plugin ini memungkinkan saya untuk sangat mudah "ajaxify" bentuk html pada halaman dan memberikan onsubmit, sukses dan kesalahan event handler untuk menerapkan umpan balik kepada pengguna tentang status kirim formulir. Hal ini memungkinkan plugin yang akan digunakan sebagai berikut:
Perhatikan bahwa sukses dan kesalahan event handler menerima argumen yang sama yang anda akan menerima dari kejadian yang sesuai dari jQuery ajax metode.
Saya punya berikut untuk saya:
mana
Ini mengasumsikan posting ke 'url' kembali ajax dalam bentuk
{sukses: palsu, error:'Kesalahan saya untuk menampilkan'}
Anda dapat bervariasi ini seperti yang anda suka. Merasa bebas untuk menggunakan cuplikan.
jQuery AJAX submit form, tidak lain adalah submit form menggunakan form ID ketika anda klik pada tombol
Silakan ikuti langkah-langkah
Langkah 1 - tag Form harus memiliki sebuah field ID
Tombol yang anda klik
Langkah 2 - kirim event di jQuery yang membantu untuk mengirimkan formulir. dalam kode di bawah ini kami sedang mempersiapkan JSON permintaan dari elemen HTML ****nama.
untuk live demo klik pada link di bawah ini
[Cara submit Form menggunakan jQuery AJAX?][1]
pertimbangkan untuk menggunakan
terdekat
Untuk menghindari beberapa formdata mengirimkan:
Don't lupa untuk melepaskan menyerahkan acara, sebelum menyerahkan formulir lagi, Pengguna dapat memanggil menyerahkan fungsi lebih dari satu kali, mungkin dia lupa sesuatu, atau kesalahan validasi.
Jika anda're menggunakan formulir**.cerita bersambung() - anda perlu untuk memberikan setiap elemen form nama seperti ini:
Dan bentuk menjadi serial seperti ini:
Anda dapat menggunakan ini di submit fungsi seperti di bawah ini.
Form HTML
fungsi jQuery:
Untuk rincian lebih lanjut dan sampel Kunjungi: http://www.spiderscode.com/simple-ajax-contact-form/
Ini bukan jawaban untuk OP's pertanyaan, tapi dalam kasus jika anda dapat't menggunakan bentuk statis DOM, anda juga dapat mencoba seperti ini.
Hanya pengingat bahwa
data
yang dapat menjadi obyek, terlalu:`` $('bentuk#foo').submit(function () { $.ajax({ url: 'http://foo.bar/some-ajax-script', jenis: 'POST', dataType: 'json', data: { 'foo': 'beberapa-foo', 'bar': 'beberapa bar' } }).selalu(function (data) { konsol.log(data); });
return false; }); ``
Saya tahu ini adalah
jQuery
terkait pertanyaan, tapi sekarang hari-hari dengan JS ES6 hal-hal yang jauh lebih mudah. Karena tidak ada yang murnijavascript
menjawab, saya pikir saya bisa menambahkan sederhana murnijavascript
solusi untuk ini, yang menurut saya jauh lebih bersih, dengan menggunakanfetch()
API. Ini cara modern untuk mengimplementasikan jaringan permintaan. Dalam kasus anda, karena anda sudah memiliki sebuah elemen form kita hanya dapat menggunakannya untuk membangun permintaan kami.Ada's juga menyerahkan acara, yang dapat memicu seperti ini $("#form_id").submit(). Anda'd gunakan metode ini jika formulir ini juga diwakili di HTML sudah. Anda'd hanya baca di halaman, mengisi form input dengan barang-barang, kemudian memanggil .submit(). It'll menggunakan metode dan tindakan yang telah ditetapkan dalam bentuk's deklarasi, sehingga anda don't perlu copy ke javascript.
contoh