Berapa kali anda mengalami fakta bahawa anda memasukkan data yang salah, yang menyebabkan halaman dimuat semula dan memadam sepenuhnya aksara yang dimasukkan dalam medan. Untuk membetulkannya, terdapat pendekatan yang agak popular untuk membina antara muka pengguna, dan namanya ajax. Ia muncul dalam banyak projek dan digunakan dalam pelbagai cara.
Menghantar borang ajax: menyambungkan perpustakaan
Sertakan pustaka jquery dalam index.php.
Terdapat cara lain untuk memasukkan jquery dalam dokumen. Anda perlu memuat turun pustaka dari tapak rasmi jquery, letakkannya dalam folder yang betul dan tampal pautan kepadanya seperti ini:
Menyambung dan menyediakan dokumen
1. Cipta dokumen.php dalam folder dengan tapak dengan sebarang nama yang sesuai untuk anda - ini akan menghantar borang php ajax. Di dalamnya anda boleh menulis dalam format apa teks dengan mesej akan dipaparkan. Contohnya, form1.php.
2. Dalam folder fail javascript anda, buat fail.js dengansebarang nama yang sesuai. Contohnya, form.js.
3. Sambungkan folder ini ke dokumen anda.
4. Buat borang dengan parameter berikut:
Di dalamnya, jangan lupa untuk mencipta medan untuk memasukkan data anda.
5. Pergi ke fail form1.php dalam direktori dengan tapak, di mana tulis:
Kini, apabila menyerahkan borang, penyemak imbas akan memaparkan maklumat tentang data.
Dalam fail yang sama, anda boleh menulis apa sebenarnya yang akan dipaparkan atau bagaimana. Anda juga boleh menulis kitaran atau algoritma di sini.
Menghantar borang jquery ajax
1. Dalam fail form.js yang dibuat, anda perlu menulis kod yang bertanggungjawab untuk membuat fail berfungsi selepas halaman tapak dimuatkan sepenuhnya.
$(dokumen).ready(function(){ //Kod seterusnya kami akan dijalankan di sini });
2. Kemudian anda perlu menyesuaikan butang hantar. Lakukan semuanya dalam fail yang sama.
$("borang").submit(function(event) { event.preventDefault(); //kod berikut akan ditulis di sini });
Bahagian pertama kod bertanggungjawab untuk memilih elemen pada halaman dan bahagian kedua bertanggungjawab untuk menghalang tindakan lalai.
3. Kemudian, sebagai contoh, ambil penyerahan borang ajax tentang kejayaan.
$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
Berikut ialah penerangan terperinci bagi setiap tetapan.
- jenis -ini ialah jenis permintaan yang dihantar dalam borang; memandangkan ia berharga POST, jenis permintaan akan sesuai;
- ini - pemilihan elemen dalam binaan;
- attr - singkatan untuk tarikan (attraction), iaitu parameter tertentu sasaran (bentuk) yang dipilih ditarik;
- url - parameter yang bertanggungjawab ke mana permintaan akan dihantar; dalam kes ini, apa yang ditulis dalam parameter borang (form1.php);
- data - menentukan data borang;
- contentType - bertanggungjawab untuk menghantar pengepala ke pelayan; dalam kes ini ia tidak diperlukan;
- cache - bertanggungjawab untuk menyimpan cache pengguna;
- processData - bertanggungjawab untuk menukar data kepada rentetan;
- success - memaparkan hasil penyerahan data yang berjaya; oleh itu, jika penghantaran data berjaya, maka tindakan fungsi tersebut akan dilaksanakan.
4. Selesai, kini apabila menyerahkan borang ajax, anda akan menerima data tanpa memuat semula halaman.
Hasilnya boleh diubah menggunakan fail form1.php, di mana anda boleh menentukan apa sebenarnya yang akan dipaparkan sebagai hasilnya. Contohnya, Anda boleh mencuba dan membuat semakan untuk ketepatan memasukkan data tertentu: jika data itu tidak betul, maka mesej yang dikehendaki dipaparkan, jika tidak, ia akan mengubah hala ke halaman yang betul. Banyak perkara lain juga boleh dilakukan, apa sahaja kehendak hati anda.
Terdapat juga penghantaran data ke pelayan secara tidak segerak. Ini adalah apabila pengguna memasukkan teks, dan ia segera diserlahkan dengan warna merah, menunjukkan bahawa data yang dimasukkan adalah tidak betul. Mengenainyaterdapat banyak manual di Internet, di mana semuanya diterangkan dengan jelas dan ditunjukkan dengan contoh.
Kesimpulan
Tidak dinafikan, ajax ialah alat yang berguna dalam pembinaan tapak web. Untuk membuat halaman dan antara muka berkualiti tinggi, ia hanya perlu. Perlu diingat bahawa adalah sangat penting untuk mengetahui jQuery untuk memahami sepenuhnya gambar dan apa yang ditulis dalam kod, kerana salinan-tampal yang mudah tidak boleh sentiasa membantu dan mengajar anda memahami kod tersebut. Perlu diingat bahawa versi bahasa dikemas kini dan beberapa ciri mungkin hilang begitu saja. Oleh itu, tidak semua penyelesaian mungkin berkaitan, selalunya kod bertulis tidak berfungsi atau tidak menghasilkan hasil yang anda ingin lihat pada skrin anda.
