Cara Menggunakan AJAX untuk Mengirim Formulir Web

Iklan

Anda mungkin sudah membaca panduan jQuery Panduan Dasar untuk JQuery untuk Programmer JavascriptJika Anda seorang programmer Javascript, panduan untuk JQuery ini akan membantu Anda memulai pengkodean seperti seorang ninja. Baca lebih banyak , serta bagian lima dari kami tutorial jQuery di AJAX jQuery Tutorial (Bagian 5): AJAX Them All!Ketika kita mendekati akhir dari seri tutorial mini jQuery kami, sudah saatnya kita melihat lebih dalam pada salah satu fitur jQuery yang paling sering digunakan. AJAX memungkinkan situs web untuk berkomunikasi dengan ... Baca lebih banyak , tapi hari ini saya akan menunjukkan kepada Anda cara menggunakan AJAX untuk secara dinamis mengirim formulir web. JQuery sejauh ini merupakan cara termudah untuk menggunakan AJAX, jadi cek kami tutorial memulai jQuery Tutorial - Persiapan: Dasar-Dasar & PenyeleksiMinggu lalu, saya berbicara tentang betapa pentingnya jQuery bagi pengembang web modern dan mengapa itu mengagumkan. Minggu ini, saya pikir sudah saatnya kita membuat tangan kita kotor dengan beberapa kode dan belajar bagaimana ... Baca lebih banyak

jika Anda seorang pemula. Ayo lompat masuk.

Mengapa Menggunakan AJAX

Anda mungkin bertanya-tanya, "Mengapa saya perlu AJAX?" HTML sangat mampu mengirimkan formulir, dan melakukannya dengan cara yang tidak menyakitkan. AJAX diimplementasikan di sebagian besar halaman web, dan popularitasnya terus meningkat.

Manfaat besar yang dibawa AJAX adalah kemampuannya sebagian memuat bagian dari halaman web. Ini membuat halaman tampak lebih cepat dan lebih responsif, dan menghemat bandwidth dengan hanya harus memuat ulang sebagian kecil data daripada seluruh halaman. Berikut adalah beberapa kasus penggunaan dasar AJAX:

• Periksa email baru secara teratur.
• Perbarui skor sepakbola langsung setiap 30 detik.
• Perbarui harga untuk lelang online.

AJAX memberi Anda, pengembang, kemampuan yang hampir tak terbatas untuk membuat laman web cepat, responsif, dan tajam - sesuatu yang akan berterima kasih kepada pengunjung Anda.

HTML

Sebelum memulai, Anda memerlukan formulir HTML. Jika Anda tidak tahu apa itu HTML, baca panduan kami di cara membuat situs web untuk pemula Cara Membuat Website: Untuk PemulaHari ini saya akan membimbing Anda melalui proses pembuatan situs web lengkap dari awal. Jangan khawatir jika ini terdengar sulit. Saya akan memandu Anda melalui setiap langkah. Baca lebih banyak .

Inilah HTML yang Anda butuhkan:

 Nama: Usia: 

Html ini mendefinisikan formulir dengan beberapa elemen. Perhatikan bagaimana ada tindakan dan metode atribut. Ini menentukan di mana dan bagaimana formulir dikirimkan. Mereka tidak diperlukan ketika Anda menggunakan AJAX, tetapi itu ide yang baik untuk menggunakannya, karena itu memastikan bahwa pengunjung ke situs web Anda masih dapat menggunakannya jika mereka menonaktifkan JavaScript. Halaman ini termasuk jQuery yang dihosting oleh Google di CDN Apa itu CDN & Mengapa Penyimpanan Tidak Lagi Menjadi MasalahCDN membuat Internet cepat dan situs web terjangkau bahkan saat Anda menskalakan hingga jutaan pengguna. Pertama, bandwidth membutuhkan biaya; kita yang memiliki kontrak terbatas tahu itu dengan baik. Anda tidak hanya ... Baca lebih banyak . Itu kepala mengandung a naskah tag - ini adalah tempat Anda akan menulis kode Anda.

Formulir ini mungkin terlihat agak membosankan sekarang, jadi Anda mungkin ingin mempertimbangkannya belajar CSS 5 Langkah Bayi untuk Belajar CSS dan Menjadi Penyihir CSS Kick-AssCSS adalah satu-satunya perubahan halaman web yang paling penting yang pernah dilihat dalam dekade terakhir, dan membuka jalan bagi pemisahan gaya dan konten. Dengan cara modern, XHTML mendefinisikan struktur semantik ... Baca lebih banyak untuk menghidupkannya sedikit.

JavaScript

Ada beberapa cara Anda bisa mengirimkan formulir dengan JavaScript. Cara pertama dan termudah untuk melakukannya adalah melalui Internet Kirimkan metode:

document.getElementById ('myForm'). submit ();

Tentu saja Anda dapat menargetkan formulir dengan jQuery jika diinginkan - tidak ada bedanya:

$ ('# myForm'). submit ();

Perintah ini memberi tahu browser Anda untuk mengirimkan formulir, persis seperti menekan tombol kirim. Ini menargetkan formulir dengan id-nya, dan dalam hal ini, itu myForm. Ini bukan AJAX, jadi itu akan memuat ulang seluruh halaman - sesuatu yang tidak selalu diinginkan.

Dalam metode atribut formulir Anda, Anda menentukan cara mengirimkan formulir. Ini bisa POS atau DAPATKAN. Atribut ini tidak digunakan ketika mengirimkan formulir menggunakan AJAX, tetapi metode yang sama dapat digunakan.

Sebagian besar web modern dijalankan dengan permintaan GET atau POST. Secara umum, GET digunakan untuk mengambil data, sedangkan POST digunakan untuk mengirim data (dan mengembalikan respons). Data dapat dikirim dengan GET, tetapi POST hampir selalu merupakan pilihan yang lebih baik - terutama untuk data formulir. Anda mungkin pernah melihat permintaan GET sebelumnya - mereka mengirim data yang dilampirkan ke URL:

ewhereebsite.com/index.html? nama = Joe

Tanda tanya memberi tahu browser bahwa data apa pun yang segera mengikutinya tidak boleh digunakan untuk melintasi situs web, tetapi sebaliknya harus diteruskan ke halaman untuk diproses. Ini berfungsi baik untuk hal-hal sederhana seperti nomor halaman, tetapi memiliki beberapa kelemahan:

Batas karakter maksimum: Ada jumlah maksimum karakter yang dapat dikirim dalam url. Anda mungkin tidak memiliki cukup jika Anda mencoba mengirim sejumlah besar data.
Visibilitas: Siapa saja dapat melihat data yang dikirim dalam permintaan GET - itu tidak baik untuk data sensitif seperti kata sandi atau data formulir.

Permintaan POST bekerja dengan cara yang sama, hanya saja mereka tidak mengirim data dalam URL. Ini berarti sejumlah besar data dapat dikirim (data dikenal sebagai a muatan), dan beberapa keamanan diperoleh dengan tidak mengekspos data. Data masih dapat diakses dengan mudah, jadi lihatlah ke Sertifikat SSL Apa itu Sertifikat SSL, dan Apakah Anda Membutuhkannya?Menjelajahi Internet bisa menakutkan ketika informasi pribadi terlibat. Baca lebih banyak jika Anda ingin ketenangan pikiran.

Apakah POST atau GET digunakan, data dikirim kunci -> nilai berpasangan. Di URL di atas, kuncinya adalah nama, dan nilainya Joe.

Cara yang lebih baik untuk mengirimkan formulir adalah menggunakan JavaScript dan XML Asinkron (AJAX). JavaScript mendukung panggilan AJAX, tetapi bisa membingungkan untuk digunakan. JQuery mengimplementasikan metode yang persis sama ini, tetapi melakukannya dengan cara yang mudah digunakan. Anda dapat menginstruksikan browser Anda untuk melakukan permintaan GET atau POST - tetaplah pada POST untuk contoh ini, tetapi permintaan GET dilakukan dengan cara yang sama.

Inilah sintaksinya:

$ .post ('some / url', $ ('# myForm'). serialize ());

Kode ini melakukan beberapa hal. Bagian pertama ($) beri tahu browser Anda bahwa Anda ingin menggunakan jQuery untuk tugas ini. Bagian kedua memanggil pos metode dari jQuery. Anda harus memasukkan dua parameter; Yang pertama adalah url untuk mengirim data, sedangkan yang kedua adalah data. Anda mungkin menemukan (tergantung pada URL yang Anda coba akses), bahwa browser Anda ’ sama-asal kebijakan keamanan dapat mengganggu di sini. Anda bisa mengaktifkan berbagi sumber daya lintas asal untuk mengatasinya, tetapi cukup menunjuk ke URL yang dihosting di domain yang sama dengan halaman Anda sudah cukup sering.

Parameter kedua memanggil jQuery bersambung metode pada formulir Anda. Metode ini mengakses semua data dari formulir Anda, dan menyiapkannya untuk pengiriman - ini membuat cerita bersambung.

Kode ini saja sudah cukup untuk mengirimkan formulir, tetapi Anda mungkin menemukan hal-hal yang agak aneh. Sebaiknya selidiki alat pengembang peramban Anda, karena ini membuat proses debug jaringan menjadi mudah.

Kalau tidak, Tukang pos adalah alat gratis yang sangat baik untuk menguji permintaan HTTP.

Jika Anda ingin mengirimkan formulir Anda menggunakan AJAX ketika tombol kirim ditekan, itu sama mudahnya. Anda harus melampirkan kode Anda ke Kirimkan acara berupa. Ini kodenya:

$ (dokumen) .on ('kirim', '# myForm', function () {$ .post ('some / url', $ ('# myForm'). serialize ()); return false; });

Kode ini melakukan beberapa hal. Ketika formulir Anda dikirimkan, browser Anda datang dan menjalankan kode Anda terlebih dahulu. Kode Anda kemudian mengirimkan data formulir menggunakan AJAX. Langkah terakhir yang diperlukan adalah mencegah pengiriman formulir asli - Anda telah melakukan ini dengan AJAX, jadi Anda tidak ingin itu terjadi lagi!

Jika Anda ingin melakukan beberapa tugas lain setelah AJAX selesai (atau bahkan mungkin mengembalikan pesan status), Anda perlu menggunakan panggilan balik. JQuery membuat ini sangat mudah digunakan - cukup lewati fungsi sebagai parameter lain seperti ini:

$ .post ('url', $ ('# myForm'). serialize (), fungsi (hasil) {console.log (hasil); }

Itu hasil argumen berisi data yang dikembalikan oleh url data yang dikirim. Anda dapat dengan mudah menanggapi data ini:

if (result == 'success') {// lakukan beberapa tugas. } lain {// lakukan tugas lain. }

Itu saja untuk posting ini. Semoga Anda sekarang memiliki pemahaman yang kuat tentang permintaan HTTP, dan bagaimana AJAX bekerja dalam konteks formulir.

Apakah Anda mempelajari trik baru hari ini? Bagaimana Anda menggunakan AJAX dengan formulir? Sampaikan pendapat Anda di komentar di bawah!

Kredit Gambar: vectorfusionart / Shutterstock