Qancha marta notoʻgʻri maʼlumotlarni kiritganingizga duch keldingiz, buning natijasida sahifa qayta yuklandi va maydonlarga kiritilgan belgilar butunlay oʻchirib tashlandi. Buni tuzatish uchun foydalanuvchi interfeysini yaratishda juda mashhur yondashuv mavjud va uning nomi ajax. U ko'plab loyihalarda paydo bo'ladi va ko'p jihatdan ishlatiladi.
Ajax formasini yuborish: kutubxonalarni ulash
JQuery kutubxonasini index.php-ga qo'shing.
Jquery-ni hujjatga kiritishning yana bir usuli bor. Siz kutubxonani jQuery rasmiy saytidan yuklab olishingiz, uni kerakli papkaga joylashtirishingiz va unga havolani quyidagi tarzda joylashtirishingiz kerak:
Hujjatlarni ulash va sozlash
1. Siz uchun qulay bo'lgan har qanday nomdagi sayt bilan papkada.php hujjat yarating - bu ajax PHP formasini yuboradi. Unda xabarli matn qaysi formatda ko'rsatilishini yozishingiz mumkin. Masalan, form1.php.
2. Javascript fayllari jildida.js faylini yaratinghar qanday qulay nom. Masalan, form.js.
3. Ushbu jildni hujjatingizga ulang.
4. Quyidagi parametrlarga ega shakl yarating:
Unda ma'lumotlaringizni kiritish uchun maydonlar yaratishni unutmang.
5. Sayt bilan katalogdagi form1.php fayliga o'ting, unda yozing:
Endi, shaklni yuborishda brauzer ma'lumotlar haqidagi ma'lumotlarni ko'rsatadi.
Bir xil faylda aynan nima yoki qanday koʻrsatilishini yozishingiz mumkin. Bu yerda tsikllar yoki algoritmlarni ham yozishingiz mumkin.
Ajax jQuery formasi yuborilmoqda
1. Yaratilgan form.js faylida sayt sahifasi toʻliq yuklangandan soʻng faylning ishlashi uchun javobgar boʻlgan kodni yozishingiz kerak.
$(document).ready(function(){ //Keyingi kodimiz shu yerda ishlaydi });
2. Keyin yuborish tugmachasini sozlashingiz kerak. Hammasini bitta faylda bajaring.
$("forma").submit(funksiya(voqea) { event.preventDefault(); //quyidagi kod bu yerda yoziladi });
Kodning birinchi qismi sahifadagi elementni tanlash uchun, ikkinchisi esa standart harakatni oldini olish uchun javobgardir.
3. Keyin, masalan, muvaffaqiyatga erishish uchun ajax formasini oling.
$.ajax({ turi: $(this).attr('method'), url: $(this).attr('harakat'), maʼlumotlar: yangi FormData(bu), contentType: false, kesh: false, processMa'lumotlar: noto'g'ri, muvaffaqiyat: funktsiya(natija){ alert(natija); } });
Quyidagilar har bir sozlamaning batafsil tavsifi.
- turi -bu shaklda taqdim etiladigan so'rov turi; POST narxi bo'lgani uchun so'rov turi mos keladi;
- bu - konstruksiya ichidagi element tanlash;
- attr - diqqatga sazovor joyning qisqartmasi, ya'ni tanlangan maqsadning (shakl) ma'lum bir parametri jalb qilinadi;
- url - so'rov qayerga yuborilishi uchun javob beradigan parametr; bu holda forma parametrlarida nima yoziladi (form1.php);
- data - shakl ma'lumotlarini belgilaydi;
- contentType - serverga sarlavhalarni yuborish uchun javobgar; bu holda kerak emas;
- kesh - foydalanuvchi keshini saqlash uchun javobgar;
- processData - ma'lumotlarni satrga aylantirish uchun javobgar;
- success - muvaffaqiyatli ma'lumotlarni topshirish natijasini ko'rsatadi; shuning uchun, agar ma'lumotlarni yuborish muvaffaqiyatli bo'lsa, u holda funktsiyaning harakatlari bajariladi.
4. Bajarildi, endi ajax formasini yuborishda siz sahifani yangilamasdan maʼlumotlarni olasiz.
Natijani form1.php fayli yordamida oʻzgartirish mumkin, bu yerda natijada aynan nima koʻrsatilishini belgilashingiz mumkin. Masalan, Siz tajriba oʻtkazishingiz va muayyan maʼlumotlarni kiritish toʻgʻriligini tekshirishingiz mumkin: agar maʼlumotlar toʻgʻri boʻlmasa, kerakli xabar koʻrsatiladi, aks holda u toʻgʻri sahifaga yoʻn altiriladi. Yuragingiz nimani xohlasa, boshqa ko'p narsalar ham mumkin.
Serverga asinxron tarzda ma'lumotlarni yuborish ham mavjud. Bu foydalanuvchi matnni kiritganda va u darhol qizil rang bilan ajratib ko'rsatiladi, bu kiritilgan ma'lumotlar to'g'ri emasligini ko'rsatadi. Bu haqidaInternetda hamma narsa aniq tushuntirilgan va misollar bilan ko'rsatilgan ko'plab qo'llanmalar mavjud.
Xulosa
Shubhasiz, ajax veb-sayt yaratishda foydali vositadir. Yuqori sifatli sahifalar va interfeyslarni yaratish uchun bu shunchaki zarur. Ta'kidlash joizki, rasm va kodda nima yozilganligini to'liq tushunish uchun jQuery-ni bilish juda muhim, chunki oddiy nusxa ko'chirish-joylashtirish har doim ham yordam bera olmaydi va kodni tushunishga o'rgatadi. Til versiyalari yangilanganligini va ba'zi xususiyatlar shunchaki yo'qolishi mumkinligini doimo yodda tutish kerak. Shuning uchun hamma yechimlar ham tegishli bo'lishi mumkin emas, ko'pincha yozilgan kod oddiygina ishlamaydi yoki siz ekranda ko'rmoqchi bo'lgan natijani bermaydi.
