Django - Ajax

Ajax pada dasarnya adalah kombinasi teknologi yang diintegrasikan bersama untuk mengurangi jumlah pemuatan halaman. Kami biasanya menggunakan Ajax untuk memudahkan pengalaman pengguna akhir. Menggunakan Ajax di Django dapat dilakukan dengan langsung menggunakan pustaka Ajax seperti JQuery atau lainnya. Katakanlah Anda ingin menggunakan JQuery, maka Anda perlu mengunduh dan melayani perpustakaan di server Anda melalui Apache atau lainnya. Kemudian gunakan di template Anda, seperti yang mungkin Anda lakukan saat mengembangkan aplikasi berbasis Ajax.

Cara lain menggunakan Ajax di Django adalah dengan menggunakan kerangka Django Ajax. Yang paling umum digunakan adalah django-dajax yang merupakan alat yang ampuh untuk dengan mudah dan super cepat mengembangkan logika presentasi asinkron dalam aplikasi web, menggunakan Python dan hampir tanpa kode sumber JavaScript. Ini mendukung empat kerangka kerja Ajax paling populer: Prototipe, jQuery, Dojo dan MooTools.

Menggunakan Django-dajax

Hal pertama yang harus dilakukan adalah menginstal django-dajax. Ini dapat dilakukan menggunakan easy_install atau pip -

$ pip install django_dajax
$ easy_install django_dajax

Ini secara otomatis akan menginstal django-dajaxice, yang dibutuhkan oleh django-dajax. Kemudian kita perlu mengkonfigurasi dajax dan dajaxice.

Tambahkan dajax dan dajaxice di project settings.py Anda di opsi INSTALLED_APPS -

INSTALLED_APPS += (
   'dajaxice',
   'dajax'
)

Pastikan dalam file settings.py yang sama, Anda memiliki yang berikut ini -

TEMPLATE_LOADERS = (
   'django.template.loaders.filesystem.Loader',
   'django.template.loaders.app_directories.Loader',
   'django.template.loaders.eggs.Loader',
)

TEMPLATE_CONTEXT_PROCESSORS = (
   'django.contrib.auth.context_processors.auth',
   'django.core.context_processors.debug',
   'django.core.context_processors.i18n',
   'django.core.context_processors.media',
   'django.core.context_processors.static',
   'django.core.context_processors.request',
   'django.contrib.messages.context_processors.messages'
)

STATICFILES_FINDERS = (
   'django.contrib.staticfiles.finders.FileSystemFinder',
   'django.contrib.staticfiles.finders.AppDirectoriesFinder',
   'dajaxice.finders.DajaxiceFinder',
)

DAJAXICE_MEDIA_PREFIX = 'dajaxice'

Sekarang buka file myapp / url.py dan pastikan Anda memiliki yang berikut ini untuk mengatur URL dajax dan memuat file js statika dajax -

from dajaxice.core import dajaxice_autodiscover, dajaxice_config
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf import settings

Then dajax urls:

urlpatterns += patterns('',
   url(r'^%s/' % settings.DAJAXICE_MEDIA_PREFIX, include('dajaxice.urls')),)
	
urlpatterns += staticfiles_urlpatterns()

Mari kita buat formulir sederhana berdasarkan model Dreamreal kita untuk menyimpannya, menggunakan Ajax (berarti tidak ada penyegaran).

Pertama-tama, kami membutuhkan formulir Dreamreal kami di myapp / form.py.

class DreamrealForm(forms.Form):
   website = forms.CharField(max_length = 100)
   name = forms.CharField(max_length = 100)
   phonenumber = forms.CharField(max_length = 50)
   email = forms.CharField(max_length = 100)

Kemudian kita membutuhkan file ajax.py di aplikasi kita: myapp / ajax.py. Di situlah logika kita, di situlah kita meletakkan fungsi yang akan menyimpan formulir kita kemudian mengembalikan popup -

from dajaxice.utils import deserialize_form
from myapp.form import DreamrealForm
from dajax.core import Dajax
from myapp.models import Dreamreal

@dajaxice_register
def send_form(request, form):
   dajax = Dajax()
   form = DreamrealForm(deserialize_form(form))
   
   if form.is_valid():
      dajax.remove_css_class('#my_form input', 'error')
      dr = Dreamreal()
      dr.website = form.cleaned_data.get('website')
      dr.name = form.cleaned_data.get('name')
      dr.phonenumber = form.cleaned_data.get('phonenumber')
      dr.save()
      
      dajax.alert("Dreamreal Entry %s was successfully saved." % 
         form.cleaned_data.get('name'))
   else:
      dajax.remove_css_class('#my_form input', 'error')
      for error in form.errors:
         dajax.add_css_class('#id_%s' % error, 'error')
			
   return dajax.json()

Sekarang mari kita buat template dreamreal.html, yang memiliki formulir -

<html>
   <head></head>
   <body>
   
      <form action = "" method = "post" id = "my_form" accept-charset = "utf-8">
         {{ form.as_p }}
         <p><input type = "button" value = "Send" onclick = "send_form();"></p>
      </form>
      
   </body>
</html>

Tambahkan tampilan yang menyertai template di myapp / views.py -

def dreamreal(request):
   form = DreamrealForm()
   return render(request, 'dreamreal.html', locals())

Tambahkan URL yang sesuai di myapp / urls.py -

url(r'^dreamreal/', 'dreamreal', name = 'dreamreal'),

Sekarang mari tambahkan yang diperlukan di template kita untuk membuat Ajax berfungsi -

Di bagian atas file tambahkan -

{% load static %}
{% load dajaxice_templatetags %}

Dan di bagian <head> dari template dreamreal.html kita tambahkan -

Kami menggunakan perpustakaan JQuery untuk contoh ini, jadi tambahkan -

<script src = "{% static '/static/jquery-1.11.3.min.js' %}" 
   type = "text/javascript" charset = "utf-8"></script>
<script src = "{% static '/static/dajax/jquery.dajax.core.js' %}"></script>

Fungsi Ajax yang akan dipanggil saat diklik -

<script>

   function send_form(){
      Dajaxice.myapp.send_form(Dajax.process,{'form':$('#my_form').serialize(true)});
   }
</script>

Perhatikan bahwa Anda memerlukan "jquery-1.11.3.min.js" di direktori file statis Anda, dan juga jquery.dajax.core.js. Untuk memastikan semua file statis dajax disajikan di bawah direktori statis Anda, jalankan -

$python manage.py collectstatic

Note - Terkadang jquery.dajax.core.js bisa hilang, jika itu terjadi, cukup unduh sumbernya dan ambil file itu dan letakkan di bawah folder statis Anda.

Anda akan melihat layar berikut, setelah mengakses / myapp / dreamreal / -

Saat mengirimkan, Anda akan mendapatkan layar berikut -