Jquery istifadə edərək ajax forması serverə göndərilir

Mündəricat:

Jquery istifadə edərək ajax forması serverə göndərilir
Jquery istifadə edərək ajax forması serverə göndərilir
Anonim

Yanlış məlumat daxil etdiyiniz faktı ilə neçə dəfə qarşılaşmısınız, buna görə səhifə yenidən yükləndi və sahələrə daxil edilmiş simvollar tamamilə silindi. Bunu düzəltmək üçün istifadəçi interfeysi qurmaq üçün kifayət qədər populyar bir yanaşma var və onun adı ajax-dır. O, bir çox layihələrdə görünür və bir çox cəhətdən istifadə olunur.

Ajax forması göndərilir: kitabxanaları birləşdirin

jQuery kitabxanasını index.php-ə daxil edin.


Jquery-ni sənədə daxil etməyin başqa yolu da var. Siz kitabxananı jquery-nin rəsmi saytından yükləməli, onu lazımi qovluğa yerləşdirməlisiniz və ona keçidi bu şəkildə yapışdırmalısınız:


Sənədlərin qoşulması və quraşdırılması

1. Saytın olduğu qovluqda sizin üçün əlverişli olan hər hansı bir adla.php sənədi yaradın - bu, ajax php formasını göndərəcək. Orada mesajı olan mətnin hansı formatda göstəriləcəyini yaza bilərsiniz. Məsələn, form1.php.

Sayt qovluğu
Sayt qovluğu

2. Javascript faylları qovluğunda.js faylı yaradınistənilən rahat ad. Məsələn, form.js.

js qovluğu
js qovluğu

3. Bu qovluğu sənədinizə qoşun.


4. Aşağıdakı parametrlərlə forma yaradın:


Burada məlumatlarınızı daxil etmək üçün sahələr yaratmağı unutmayın.

5. Saytın olduğu qovluqdakı form1.php faylına keçin, orada yazın:

İndi formanı təqdim edərkən brauzer data haqqında məlumat göstərəcək.

Eyni faylda tam olaraq nəyin və ya necə göstəriləcəyini yaza bilərsiniz. Siz həmçinin burada dövrlər və ya alqoritmlər yaza bilərsiniz.

Ajax jQuery forması göndərilir

1. Yaradılmış form.js faylında sayt səhifəsi tam yükləndikdən sonra faylın işləməsinə cavabdeh olan kodu yazmalısınız.


$(sənəd).ready(function(){ //Növbəti kodumuz burada işləyəcək });

2. Sonra təqdim düyməsini fərdiləşdirməlisiniz. Hamısını eyni faylda edin.


$("forma").submit(funksiya(hadisə) { event.preventDefault(); //aşağıdakı kod burada yazılacaq });

Kodun birinci hissəsi səhifədəki elementin seçilməsinə, ikincisi isə defolt əməliyyatın qarşısının alınmasına cavabdehdir.

3. Sonra, məsələn, müvəffəqiyyət haqqında bir ajax forması təqdim edin.


$.ajax({ növü: $(bu).attr('metod'), url: $(this).attr('fəaliyyət'), data: yeni FormData(bu), contentType: false, cache: false, processData: false, müvəffəqiyyət: funksiya(nəticə){ alert(nəticə); } });

Aşağıdakılar hər bir parametrin ətraflı təsviridir.

  • növ -bu formada təqdim olunan sorğu növüdür; POST-a başa gəldiyi üçün sorğu növü uyğun olacaq;
  • bu - konstruksiya daxilində element seçimi;
  • attr - cazibə (cazibə) üçün qısadır, yəni seçilmiş hədəfin (formanın) müəyyən parametri cəlb olunur;
  • url - sorğunun göndəriləcəyi yerə cavabdeh olan parametr; bu halda forma parametrlərində nə yazılır (form1.php);
  • data - forma datasını təyin edir;
  • contentType - serverə başlıqların göndərilməsinə cavabdehdir; bu halda lazım deyil;
  • cache - istifadəçinin keşinin saxlanmasına cavabdehdir;
  • processData - verilənlərin sətirə çevrilməsinə cavabdehdir;
  • success - uğurlu məlumatların təqdim edilməsinin nəticəsini göstərir; buna görə də məlumatların göndərilməsi uğurlu olarsa, funksiyanın hərəkətləri yerinə yetirilir.

4. Hazırdır, indi ajax formasını təqdim edərkən, səhifəni yeniləmədən məlumat alacaqsınız.

Nəticə form1.php faylından istifadə etməklə dəyişdirilə bilər, burada nəticədə dəqiq nəyin göstəriləcəyini təyin edə bilərsiniz. Məsələn, Müəyyən məlumatların daxil edilməsinin düzgünlüyünü sınaqdan keçirə və yoxlama yarada bilərsiniz: əgər məlumat düzgün deyilsə, o zaman istədiyiniz mesaj göstərilir, əks halda düzgün səhifəyə yönləndirilir. Bir çox başqa şeylər də mümkündür, ürəyiniz nə istəyir.

ajax nümunəsi
ajax nümunəsi

Serverə məlumatların asinxron şəkildə göndərilməsi də var. Bu, istifadəçi mətn daxil etdikdə və dərhal qırmızı rənglə vurğulanır və daxil edilmiş məlumatların düzgün olmadığını göstərir. Bunun haqqındaİnternetdə hər şeyin aydın şəkildə izah edildiyi və nümunələrlə göstərildiyi çoxlu təlimatlar var.

Nəticə

Şübhəsiz ki, ajax veb saytların qurulmasında faydalı vasitədir. Yüksək keyfiyyətli səhifələr və interfeyslər yaratmaq üçün sadəcə zəruridir. Qeyd etmək lazımdır ki, şəkli və kodda nə yazıldığını tam başa düşmək üçün jQuery-ni bilmək çox vacibdir, çünki sadə surətlə yapışdırıb-yapışdırmaq həmişə sizə kömək edə və kodu başa düşməyi öyrədə bilməz. Həmişə yadda saxlamağa dəyər ki, dil versiyaları yenilənir və bəzi funksiyalar sadəcə yox ola bilər. Buna görə də, bütün həllər uyğun olmaya bilər, çox vaxt yazılı kod sadəcə işləmir və ya ekranınızda görmək istədiyiniz nəticəni vermir.

Tövsiyə: