Kirim formulir tanpa refresh halaman - php/jQuery

Saat mengirimkan formulir, pengguna mengharapkan pengalaman pengguna yang mulus. Bahkan gangguan terkecil dalam pengalaman penelusuran dapat menyebabkan penurunan tingkat konversi. Misalkan situs web Anda memiliki beberapa formulir kecil yang mengharuskan pengguna untuk memasukkan detail pribadi, alamat, dan informasi sensitif lainnya. Dalam hal ini, Anda perlu mempertimbangkan untuk mengimplementasikan fitur validasi AJAX dan autosave untuk mengurangi risiko pengguna kehilangan data mereka.

Posting blog ini akan mengajari Anda cara membuat formulir AJAX tanpa refresh halaman dengan php dan jQuery. Anda juga akan dapat mengimplementasikan fitur autosave untuk pengunjung situs web Anda dan melihat contoh bagaimana praktik terbaik dapat diimplementasikan dalam skenario kehidupan nyata. Ayo Memulai!

1. Halaman web utama

Buat dan indeks.html file di situs web Anda menggunakan konten berikut. Ini adalah formulir HTML utama yang akan ditampilkan di halaman situs web. Anda cukup mengintegrasikan formulir ke dalam halaman situs web apa pun.

 Kirim Formulir Tanpa Page Refresh - PHP/JQuery - Tecadmin.Nama Net: 
 Surel: 
 No Telepon:
 Jenis kelamin Laki-laki Perempuan
   
 Data Anda akan ditampilkan di bawah… 
 ===============================
      

2. Buat JavaScript

Sekarang buat halaman javascript dengan nama kirim.JS di dalam JS Direktori menggunakan konten berikut. Anda dapat mengoptimalkan javascript ini dengan menambahkan validasi jQuery.

function submitFormData () var name = $ ("#name").val (); var email = $ ("#email").val (); var phone = $ ("#phone").val (); var gender = $ ("input [type = radio]: checked").val (); $.Posting ("Kirim.php ", name: name, email: email, telepon: telepon, jenis kelamin: gender, fungsi (data) $ ('#hasil').html (data); $ ('#myForm') [0].mengatur ulang(); );  

3. Buat skrip PHP

Sekarang buat skrip PHP bernama kirim.php. Skrip ini akan melakukan semua operasi yang didukung Anda. Saat kami mengirimkan formulir web, skrip ini akan mendapatkan semua argumen dari posting. Anda dapat menyesuaikan skrip ini sesuai dengan persyaratan Anda seperti menyimpan nilai dalam database, catatan email ke admin, dll.

"; echo $ _post ['email'] ."
"; echo $ _post ['Telepon'] ."
"; echo $ _post ['gender'] ."
"; echo" ================================
"; echo" Semua data berhasil!"; ?> 

4. Pengujian

Sekarang akses indeks.html halaman di browser web dan uji contoh ini. Anda juga dapat melihat demo ini.

Kesimpulan

Formulir AJAX adalah bagian penting dari pengembangan aplikasi web modern dan dapat digunakan untuk meningkatkan pengalaman pengguna dengan mengurangi waktu yang diperlukan untuk mengirimkan data. Teknologi di balik bentuk Ajax telah berkembang pesat selama beberapa tahun terakhir, terutama dengan munculnya kerangka kerja JavaScript yang lebih kuat yang menyediakan fungsionalitas tambahan dan kemudahan penggunaan. Penting untuk dicatat bahwa manfaat menggunakan formulir AJAX tidak terbatas pada situs web. Faktanya, konsep yang sama dapat diterapkan untuk membuat aplikasi seluler dengan antarmuka pengguna yang responsif. Inilah sebabnya mengapa penting untuk memahami dasar -dasar menciptakan formulir AJAX dan keuntungan yang menyertainya.