Hantar Borang Tanpa Page Refresh - PHP/JQuery

Semasa mengemukakan borang, pengguna mengharapkan pengalaman pengguna yang lancar. Malah gangguan terkecil dalam pengalaman melayari boleh menyebabkan penurunan kadar penukaran. Katakan laman web anda mempunyai pelbagai bentuk kecil yang memerlukan pengguna memasukkan butiran peribadi, alamat, dan maklumat sensitif yang lain. Dalam hal ini, anda perlu mempertimbangkan untuk melaksanakan ciri pengesahan AJAX dan autosave untuk mengurangkan risiko pengguna kehilangan data mereka.

Catatan blog ini akan mengajar anda cara membuat borang ajax tanpa halaman menyegarkan dengan php dan jQuery. Anda juga akan dapat melaksanakan ciri autosave untuk pelawat laman web anda dan melihat contoh bagaimana amalan terbaik dapat dilaksanakan dalam senario kehidupan sebenar. Mari kita mulakan!

1. Laman web utama

Buat dan indeks.html Fail di laman web anda menggunakan kandungan berikut. Ini adalah bentuk HTML utama yang akan dipaparkan di halaman laman web. Anda hanya boleh mengintegrasikan borang ke mana -mana halaman laman web.

 Hantar Borang Tanpa Page Refresh - PHP/JQuery - Tecadmin.Nama Bersih: 
 E -mel: 
 Telefon Tidak:
 Jantina Lelaki Perempuan
   
 Data anda akan dipaparkan di bawah .. 
 ==============================
      

2. Buat JavaScript

Sekarang buat halaman JavaScript dengan nama hantar.js dalam js direktori menggunakan kandungan berikut. Anda boleh mengoptimumkan javascript ini dengan menambahkan pengesahan jQuery.

fungsi hantarFormData () var name = $ ("#name").val (); var e -mel = $ ("#e -mel").val (); var telefon = $ ("#telefon").val (); var jantina = $ ("input [type = radio]: diperiksa").val (); $.Post ("Hantar.php ", name: name, e -mel: e -mel, telefon: telefon, jantina: jantina, fungsi (data) $ ('#hasil').HTML (data); $ ('#myForm') [0].menetapkan semula (); );  

3. Buat skrip PHP

Sekarang buat skrip php bernama hantar.php. Skrip ini akan melakukan semua operasi yang disokong anda. Apabila kami menyerahkan borang web, skrip ini akan mendapat semua hujah dari siaran. Anda boleh menyesuaikan skrip ini mengikut keperluan anda seperti menyimpan nilai dalam pangkalan data, rekod e -mel kepada admin, dll.

"; echo $ _post ['e -mel'] ."
"; echo $ _post ['telefon'] ."
"; echo $ _post ['gender'] ."
"; echo" ================================
"; echo" semua data yang dikemukakan dengan jayanya!"; ?> 

4. Ujian

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

Kesimpulan

Borang Ajax adalah bahagian penting dalam pembangunan aplikasi web moden dan boleh digunakan untuk meningkatkan pengalaman pengguna dengan mengurangkan masa yang diperlukan untuk menghantar data. Teknologi di belakang bentuk Ajax telah berkembang dengan pesat sejak beberapa tahun kebelakangan ini, terutamanya dengan kemunculan kerangka JavaScript yang lebih kuat yang menyediakan fungsi tambahan dan kemudahan penggunaan. Penting untuk diperhatikan bahawa manfaat menggunakan borang AJAX tidak terhad kepada laman web. Malah, konsep yang sama boleh digunakan untuk membuat aplikasi mudah alih dengan antara muka pengguna yang responsif. Inilah sebabnya penting untuk memahami asas -asas mewujudkan bentuk Ajax dan kelebihan yang disertakan dengannya.