How do I integrate Ajax with Django applications

Question

I am new to Django and pretty new to Ajax  I am working on a project where I need to integrate the two  I believe that I understand the principles behind them both  but have not found a good explanation of the two together    Could someone give me a quick explanation of how the codebase must change with the two of them integrating together   For example  can I still use the HttpResponse with Ajax  or do my responses have to change with the use of Ajax  If so  could you please provide an example of how the responses to the requests must change  If it makes any difference  the data I am returning is JSON

User · Answer

I am writing this because the accepted answer is pretty old, it needs a refresher.

So this is how I would integrate Ajax with Django in 2019 :) And lets take a real example of when we would need Ajax :-

Lets say I have a model with registered usernames and with the help of Ajax I wanna know if a given username exists.

html:

<p id="response_msg"></p> 
<form id="username_exists_form" method='GET'>
      Name: <input type="username" name="username" />
      <button type='submit'> Check </button>           
</form>

ajax:

$('#username_exists_form').on('submit',function(e){
    e.preventDefault();
    var username = $(this).find('input').val();
    $.get('/exists/',
          {'username': username},   
          function(response){ $('#response_msg').text(response.msg); }
    );
});

urls.py:

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('exists/', views.username_exists, name='exists'),
]

views.py:

def username_exists(request):
    data = {'msg':''}   
    if request.method == 'GET':
        username = request.GET.get('username').lower()
        exists = Usernames.objects.filter(name=username).exists()
        if exists:
            data['msg'] = username + ' already exists.'
        else:
            data['msg'] = username + ' does not exists.'
    return JsonResponse(data)

Also render_to_response which is deprecated and has been replaced by render and from Django 1.7 onwards instead of HttpResponse we use JsonResponse for ajax response. Because it comes with a JSON encoder, so you don’t need to serialize the data before returning the response object but HttpResponse is not deprecated.

User · Answer

Easy ajax calls with Django  26 10 2020  This is in my opinion much cleaner and simpler than the correct answer  This one also includes how to add the csrftoken and using login required methods with ajax  The view  login required def some view request        quot  quot  quot Returns a json response to an ajax call   request user is available in view  quot  quot  quot        Fetch the attributes from the request body     data attribute   request GET get  some attribute      Make sure to use POST GET correctly       DO SOMETHING        return JsonResponse data     status 200   urls py urlpatterns         path  some-view-does-something    views some view  name  doing-something       The ajax call The ajax call is quite simple  but is sufficient for most cases  You can fetch some values and put them in the data object  then in the view depicted above you can fetch their values again via their names  You can find the csrftoken function in django s documentation  Basically just copy it and make sure it is rendered before your ajax call so that the csrftoken variable is defined    ajax       url   quot    url  doing-something     quot       headers    X-CSRFToken   csrftoken       data    some attribute   some value       type   quot GET quot       dataType   json       success  function  data            if  data                console log data                  call function to do something with data             process data function data                        Add HTML to current page with ajax This might be a bit off topic but I have rarely seen this used and it is a great way to minimize window relocations as well as manual html string creation in javascript  This is very similar to the one above but this time we are rendering html from the response without reloading the current window  If you intended to render some kind of html from the data you would receive as a response to the ajax call  it might be easier to send a HttpResponse back from the view instead of a JsonResponse  That allows you to create html easily which can then be inserted into an element  The view   The login required part is of course optional  login required def create some html request        quot  quot  quot In this particular example we are filtering some model by a constraint sent in by      ajax and creating html to send back for those models who match the search quot  quot  quot        Fetch the attributes from the request body  sent in ajax data      search input   request GET get  search input          Get some data that we want to render to the template     if search input          data   MyModel objects filter name  contains search input    Example     else          data             Creating an html string using template and some data     html response   render to string  path to creation template html   context     models   data        return HttpResponse html response  status 200   The html creation template for view creation template html    for model in models        lt li class  quot xyz quot  gt    model name    lt  li gt     endfor     urls py urlpatterns         path  get-html    views create some html  name  get-html       The main template and ajax call This is the template where we want to add the data to  In this example in particular we have a search input and a button that sends the search input s value to the view  The view then sends a HttpResponse back displaying data matching the search that we can render inside an element     extends  base html        load static       block content         lt input id  quot search-input quot  placeholder  quot Type something    quot  value  quot  quot  gt       lt button id  quot add-html-button quot  class  quot btn btn-primary quot  gt Add Html lt  button gt       lt ul id  quot add-html-here quot  gt           lt  -- This is where we want to render new html -- gt       lt  ul gt     end block        block extra js         lt script gt             When button is pressed fetch inner html of ul            quot  add-html-button quot   on  click   function  e               e preventDefault                let search input       search-input   val                let target element       add-html-here                  ajax                   url   quot    url  get-html     quot                   headers    X-CSRFToken   csrftoken                   data    search input   search input                   type   quot GET quot                   dataType   html                   success  function  data                        if  data                            console log data                              Add the http response to element                         target element html data                                                                           lt  script gt     endblock

User · Answer

AJAX is the best way to do asynchronous tasks  Making asynchronous calls is something common in use in any website building  We will take a short example to learn how we can implement AJAX in Django  We need to use jQuery so as to write less javascript   This is Contact example  which is the simplest example  I am using to explain the basics of AJAX and its implementation in Django  We will be making POST request in this example  I am following one of the example of this post  https   djangopy org learn step-up-guide-to-implement-ajax-in-django  models py  Let s first create the model of Contact  having basic details    from django db import models  class Contact models Model       name   models CharField max length   100      email   models EmailField       message   models TextField       timestamp   models DateTimeField auto now add   True       def   str   self           return self name   forms py  Create the form for the above model   from django import forms from  models import Contact  class ContactForm forms ModelForm       class Meta          model   Contact         exclude     timestamp       views py  The views look similar to the basic function-based create view  but instead of returning with render  we are using JsonResponse response   from django http import JsonResponse from  forms import ContactForm  def postContact request       if request method     POST  and request is ajax            form   ContactForm request POST          form save           return JsonResponse   success  True   status 200      return JsonResponse   success  False   status 400    urls py  Let s create the route of the above view   from django contrib import admin from django urls import path from app 1 import views as app1  urlpatterns         path  ajax contact   app1 postContact  name   contact submit        template  Moving to frontend section  render the form which was created above enclosing form tag along with csrf token and submit button  Note that we have included the jquery library    lt form id    contactForm  method   POST  gt    csrf token          contactForm as p       lt input type  submit  name  contact-submit  class  btn btn-primary    gt   lt  form gt    lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt    Javascript  Let s now talk about javascript part  on the form submit we are making ajax request of type POST  taking the form data and sending to the server side       contactForm   submit function e          prevent from normal form behaviour         e preventDefault               serialize the form data           var serializedData     this  serialize              ajax               type    POST               url        url  contact submit                   data   serializedData              success   function response                 reset the form after successful submit                     contactForm   0  reset                                error   function response                   console log response                                      This is just a basic example to get started with AJAX with django  if you want to get dive with several more examples  you can go through this article  https   djangopy org learn step-up-guide-to-implement-ajax-in-django

User · Answer

Further from yuvi s excellent answer  I would like to add a small specific example on how to deal with this within Django  beyond any js that will be used   The example uses AjaxableResponseMixin and assumes an Author model   import json  from django http import HttpResponse from django views generic edit import CreateView from myapp models import Author  class AjaxableResponseMixin object               Mixin to add AJAX support to a form      Must be used with an object-based FormView  e g  CreateView              def render to json response self  context    response kwargs           data   json dumps context          response kwargs  content type      application json          return HttpResponse data    response kwargs       def form invalid self  form           response   super AjaxableResponseMixin  self  form invalid form          if self request is ajax                return self render to json response form errors  status 400          else              return response      def form valid self  form             We make sure to call the parent s form valid   method because           it might do some processing  in the case of CreateView  it will           call form save   for example           response   super AjaxableResponseMixin  self  form valid form          if self request is ajax                data                      pk   self object pk                            return self render to json response data          else              return response  class AuthorCreate AjaxableResponseMixin  CreateView       model   Author     fields     name     Source  Django documentation  Form handling with class-based views  The link to version 1 6 of Django is no longer available updated to version 1 11

User · Answer

When we use Django   Server     gt  Client Browser           Send a page  When you click button and send the form  ---------------------------- Server  lt     Client Browser          Give data back   data in form will be lost  Server     gt  Client Browser          Send a page after doing sth with these data ----------------------------   If you want to keep old data  you can do it without Ajax   Page will be refreshed   Server     gt  Client Browser           Send a page Server  lt     Client Browser          Give data back   data in form will be lost  Server     gt  Client Browser          1  Send a page after doing sth with data       2  Insert data into form and make it like before         After these thing  server will send a html page to client  It means that server do more work  however  the way to work is same    Or you can do with Ajax  Page will be not refreshed   --------------------------  lt Initialization gt   Server     gt  Client Browser   from URL1            Give a page                       --------------------------    lt Communication gt  Server  lt     Client Browser             Give data struct back but not to refresh the page  Server     gt  Client Browser   from URL2         Give a data struct such as JSON  ---------------------------------   If you use Ajax  you must do these    Initial a HTML page using URL1  we usually initial page by Django template   And then server send client a html page  Use Ajax to communicate with server using URL2  And then server send client a data struct    Django is different from Ajax  The reason for this is as follows    The thing return to client is different  The case of Django is HTML page  The case of Ajax is data struct   Django is good at creating something  but it only can create once  it cannot change anything  Django is like anime  consist of many picture   By contrast  Ajax is not good at creating sth but good at change sth in exist html page    In my opinion   if you would like to use ajax everywhere  when you need to initial a page with data at first  you can use Django with Ajax  But in some case  you just need a static page without anything from server  you need not use Django template    If you don t think Ajax is the best practice  you can use Django template to do everything  like anime    My English is not good

User · Answer

I have tried to use AjaxableResponseMixin in my project  but had ended up with the following error message      ImproperlyConfigured  No URL to redirect to   Either provide a url or define a get absolute url method on the Model    That is because the CreateView will return a redirect response instead of returning a HttpResponse when you to send JSON request to the browser  So I have made some changes to the AjaxableResponseMixin  If the request is an ajax request  it will not call the super form valid method  just call the form save   directly   from django http import JsonResponse from django import forms from django db import models  class AjaxableResponseMixin object       success return code   1     error return code   0             Mixin to add AJAX support to a form      Must be used with an object-based FormView  e g  CreateView              def form invalid self  form           response   super AjaxableResponseMixin  self  form invalid form          if self request is ajax                form errors update   result   self error return code               return JsonResponse form errors  status 400          else              return response      def form valid self  form             We make sure to call the parent s form valid   method because           it might do some processing  in the case of CreateView  it will           call form save   for example           if self request is ajax                self object   form save               data                      result   self success return code                           return JsonResponse data          else              response   super AjaxableResponseMixin  self  form valid form              return response  class Product models Model       name   models CharField  product name   max length 255   class ProductAddForm forms ModelForm               Product add form             class Meta          model   Product         exclude     id     class PriceUnitAddView AjaxableResponseMixin  CreateView               Product add view             model   Product     form class   ProductAddForm

User · Answer

Even though this isn t entirely in the SO spirit  I love this question  because I had the same trouble when I started  so I ll give you a quick guide  Obviously you don t understand the principles behind them  don t take it as an offense  but if you did you wouldn t be asking     Django is server-side  It means  say a client goes to a URL  you have a function inside views that renders what he sees and returns a response in HTML  Let s break it up into examples   views py   def hello request       return HttpResponse  Hello World     def home request       return render to response  index html     variable    world      index html    lt h1 gt Hello    variable     welcome to my awesome site lt  h1 gt    urls py   url r  hello     myapp views hello    url r  home     myapp views home      That s an example of the simplest of usages  Going to 127 0 0 1 8000 hello means a request to the hello   function  going to 127 0 0 1 8000 home will return the index html and replace all the variables as asked  you probably know all this by now    Now let s talk about AJAX  AJAX calls are client-side code that does asynchronous requests  That sounds complicated  but it simply means it does a request for you in the background and then handles the response  So when you do an AJAX call for some URL  you get the same data you would get as a user going to that place    For example  an AJAX call to 127 0 0 1 8000 hello will return the same thing it would as if you visited it  Only this time  you have it inside a JavaScript function and you can deal with it however you d like  Let s look at a simple use case     ajax       url   127 0 0 1 8000 hello       type   get      This is the default though  you don t actually need to always mention it     success  function data            alert data              failure  function data             alert  Got an error dude                 The general process is this    The call goes to the URL 127 0 0 1 8000 hello as if you opened a new tab and did it yourself  If it succeeds  status code 200   do the function for success  which will alert the data received  If fails  do a different function    Now what would happen here  You would get an alert with  hello world  in it  What happens if you do an AJAX call to home  Same thing  you ll get an alert stating  lt h1 gt Hello world  welcome to my awesome site lt  h1 gt    In other words - there s nothing new about AJAX calls  They are just a way for you to let the user get data and information without leaving the page  and it makes for a smooth and very neat design of your website  A few guidelines you should take note of    Learn jQuery  I cannot stress this enough  You re gonna have to understand it a little to know how to handle the data you receive  You ll also need to understand some basic JavaScript syntax  not far from python  you ll get used to it   I strongly recommend Envato s video tutorials for jQuery  they are great and will put you on the right path  When to use JSON   You re going to see a lot of examples where the data sent by the Django views is in JSON  I didn t go into detail on that  because it isn t important how to do it  there are plenty of explanations abound  and a lot more important when  And the answer to that is - JSON data is serialized data  That is  data you can manipulate  Like I mentioned  an AJAX call will fetch the response as if the user did it himself  Now say you don t want to mess with all the html  and instead want to send data  a list of objects perhaps   JSON is good for this  because it sends it as an object  JSON data looks like a python dictionary   and then you can iterate over it or do something else that removes the need to sift through useless html  Add it last  When you build a web app and want to implement AJAX - do yourself a favor  First  build the entire app completely devoid of any AJAX  See that everything is working  Then  and only then  start writing the AJAX calls  That s a good process that helps you learn a lot as well  Use chrome s developer tools  Since AJAX calls are done in the background it s sometimes very hard to debug them  You should use the chrome developer tools  or similar tools such as firebug  and console log things to debug  I won t explain in detail  just google around and find out about it  It would be very helpful to you  CSRF awareness  Finally  remember that post requests in Django require the csrf token  With AJAX calls  a lot of times you d like to send data without refreshing the page  You ll probably face some trouble before you d finally remember that - wait  you forgot to send the csrf token  This is a known beginner roadblock in AJAX-Django integration  but after you learn how to make it play nice  it s easy as pie    That s everything that comes to my head  It s a vast subject  but yeah  there s probably not enough examples out there  Just work your way there  slowly  you ll get it eventually

User · Answer

Simple and Nice  You don t have to change your views  Bjax handles all your links  Check this out  Bjax  Usage    lt script src  bjax min js  type  text javascript  gt  lt  script gt   lt link href  bjax min css  rel  stylesheet  type  text css    gt    Finally  include this in the HEAD of your html      a   bjax      For more settings  checkout demo here   Bjax Demo

[python] How do I integrate Ajax with Django applications?

Examples related to python

Examples related to ajax

Examples related to django