Register Now

Login


Lost Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Add question

You must login to ask question .

Login


Register Now

Merhaba, kayıt formu üzerinden kayıt olabilirsiniz. Fakat sosyal medya ile kayıt olmanızı önermekteyiz.

Django Ajax Kullanımı

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.

 

About Ali YamanProfesyonel

Herzaman bilginin gücüne inanlardan oldum , araştirmalarım ve deneyimlerimlerimi sizlere sunmayı amaçlıyorum. İstanbul Üniversitesi Kontrol ve Otomasyon Öğrencisiyim Elektronik ve Programlama ile ilgim var.

Follow Me

Comments ( 3 )

  1. Çok teşekkürler. Aranan bir bilgiydi 🙂

  2. ajax kullanarak aynı form üzerinde “return render” ile listesi nasıl güncellenebilir,bununla ilgili bir örnek yok,internette bulamadım, anlatılan örneklerin hemen hepsi yukarıda sizin anlattığınız gibi.Bir context’i, view’e gelen parametrelere göre nasıl güncellendiği dair bir örnek yapabilir misiniz?

    not: ajax içindeki success: function () { ile oluştur ve bilgiyi buraya doldur diyeceksiniz, bu işimi görmüyor,zira html’in kendisinden kaynaklanan bir bug var!!!

    konuyu daha detaylı anlatırsak:

    html sayfa üzerinde bir button , bir input ve var.’da ürün satışları var.Input’a girilen ürün id’si ne göre butona bastığım zaman aynı html sayfa üzerindeki güncellensin

    id
    tarih

    {% for row in objects%}

    {{ row.id }}
    {{ row.tarih}}

    {% endfor %}

    $(document).ready(function() {
    $(‘#btn’).click(function() {
    pk = $(‘#i_id’).val();
    //alert(pk);
    $.ajax({
    type: ‘GET’,
    url: ‘/liste_satis/’,
    data: {pk: pk},
    success: function () {
    //alert(‘Object run!’)
    }
    });
    });
    });

    def liste_satis(request):
    if request.is_ajax():
    urun_id=request.GET[‘pk’]
    Satis.objects.filter(id=urun_id)
    else:
    objects = Satis.objects.all()
    return render(request, ‘satis.html’,{‘objects’: objects})

Leave a reply

Captcha Click on image to update the captcha .