Django Ajax Kullanımı


Merhabalar, Django Framework üzerinde Ajax çalışmaları yapacağız. Şimdiden kemerleri iyi bağlayın…

Nedir bu Ajax? , yoksa AFC Ajax mı?

Futbol ile tabiki alakasi yok. Ajax, tüm sayfayı kullanıcıya tekrar yükletmeden ekrana getiren veya servera gönderen javascript modülüdür. Modern web sitelerde, anlık işlemlerin yapıldığını ve sayfaların yüklenmeden tek sayfada işlemlerin yapıldığını görmekteyiz. İsimleri değişsede, hepsi ajax mantığında çalışmaktadır.

Django’da bu işlemin ilk başta kompleks bir yapı olduğunu görsekte, ve yaşadığımız tüm sorunların İYİ GÖRMEMEK olduğunu göreceğiz. Çünkü ilk başta django ile ajax işlemlerini araştirip yapmaya çalışırken çok garip hatalar yaşadım, tüm suçun bende olduğunu gördüm. Yaşadığım hatalardan ders alarak makaleyi yazacağim umarım daha faydalı olur.

Peki Neler Yapacağız ?

  • Form Ajax

Sayfa yenilenmeden, post istediği ile sunucudan veri cekeceğiz. Çok basit olmasını istedim, istediğiniz projeye göre uyarlayabilirsiniz.

  • Anlık Veri Çekme (Anlık Ajax)

Bu durumu yine Facebook’dan örnek verebiliriz. Biri bir gönderi paylaştığında, sayfa yenilemeden görme olayına benzetebiliriz.


django-ile-jquery-kullanimi

Bu işlemleri yapmak için, javascript framework’ü olan Jquery’i kullanacağız. Belki eski teknoloji olarak nitelendirilsede halen kullanmaktadır.

Yine benzer javascript frameworkleri ilede aynı işlemleri yapmanız yine aynı mantıkta olacaktır.

 

CDN olarak kullanabiliriz, bu link şimdilik burada kalsın lazım olacak.

Boş veya dolu bir django projeniz olduğunu varsayarak devam edeceğim. Kendi projenize göre uyarlayabilirsiniz.

Haydi başlıyalım!

Proje bitiminde, elde edeceğimiz örnek görüntü 🙂

django-anlik-veri

1-) Django ile Form Ajax Yapımı

  • Views.py girelim ve gerekli modülleri ekliyelim öncelikle (eksikleri tamamlayabilirsiniz.)

  • Form sayfasını oluşturmak için fonksiyon yazalım.

  • form.html sayfasını “templates” içerisinde oluşturalım (templates adını farklı belediyseniz hiç sorun değil)

Burada html sayfa içerisinde bir kaç ajax kodları yazdım. Sıfırdan ajax’ı anlatmam münkün değil ama kısaca özet çekebilirim.

  • data: { csrfmiddlewaretoken: “{{ csrf_token }}” }”  bu yapı biraz tanıdık gelmesi gerekiyor. Django post medotunu dışarıya response(yanıt) ederken, bu formatta yollar. dolasıyla datamızı bu şekilde belirledik.
  • yanit” adlı bir id’miz mevcut. Bu id’e sahip linke tıklandığında, Ajax çalışıp gelen json verilerini ayrıştırıp gerekli yerlere yaziyor.
  • Daha sonrasında, id=”user” olan kısma, kullanıcının email bilgisini dönüyor.

Kısaca bu şekilde çalışmaktadır.

/yanit/’a ajax istediği gittiğini yukarda görmekteyiz. Dolasıyla /yanit/ görünümünü oluşturmalıyız.

Burada, bir ajax istediği gelirse json olarak “email” değişkeni vasıtasıyla kullanıcının email bilgisi dönmektedir.

Rotalarımızı oluşturalım (Urls.py)

NOT : Kullanıcı “admin” sayfasına giriş yapmak zorundadır çünkü request.user.email üzerinden veri çekiliyor.

django-ajax

ÖZET 

Kişi siteye girdiğinde(anasayfa) , form fonksiyonu çalışıp “form.html” çağıracaktır.

django-ajax-kullanimi

Resimde görüldüğü gibi bir sayfa bizi karşılayacaktır. Eğer “link” tıklanırsa bizi “/yanit” adlı url gönderip, gerekli JSON çıktıları alip bizi tekrar ana sayfaya gönderecektir.

django-form-ajax

2-) Django ile Anlık Veri Çekimi

  • Views.py giriş yapalım ve görünüm fonksiyonlarını oluşturalım

Görüldüğü üzere, ajax istediği geldiğinde json olarak “anlik” değerini yolluyor(rastgele sayı).

  • anlikveri.html sayfasını oluşturalım.

  • Burada /anlik/ urlsine her 1sn’de bir istek gidip, json bilgilerini okuyacaktır.

Rotalarımızı oluşturalım (Urls.py)

django-anlik-veri

ÖZET : 

Kullanıcı “/anlik/” adlı sayfa giriş yaptığında şöyle bi sayfa karşılaycaktır.

django-anlik-veri-cekmeBu şekilde, her saniyede bir farklı bir değer gelecektir.


Biraz karışık gelebilir bunun sebebi, javascript tam hakim olmamanız veya jquery framework hiç kullanmamızdan dolayı kaynaklaniyor olabilir.

Umarım faydalı olmuştur.

 

Django Ajax Kullanımı

Giriş Yap

Hoşgeldin, sefa getirdin :)

Şifre Sıfırla

Şifreni bidaha unutma lütfen :)

Geri git :
Giriş Yap