How to work with AJAX requests and responses in Django

There are a lot of scenarios where we want to use AJAX requests in web applications as it helps web applications to be much faster and dynamic. This shot will explore how we can handle AJAX requests and responses in Django to create a username validator. We will be using function-based views and jQuery for simplicity.

Without wasting any more time, let’s jump to the interesting part.

Initial set-up

1. base.html

base.html is the base file that will be extended in other templates. By using this approach, we can ignore installing CDNs in every template we create.

As mentioned, for this shot, let’s assume we want to validate the username field as soon as the user enters his username. We will do a simple check to see whether or not someone has already taken the username.

2. urls.py

The urls.py file contains the URLs that will be served in our web application.

from django.urls import path
from . import views

urlpatterns = [
    path('',views.index,name="index"),
]

3. views.py

The views.py file contains the various methods used to serve data through the URLs defined in our web application.

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return render(request,'register.html')

4. register.html

The register.html file contains the UI part. There is a form that contains three input fields, and one submit button. Make sure to include the csrf_token inside the form.

UI

AJAX Request

Let’s implement an AJAX request to check whether or not the username is already taken. We will use the id of the username field and add a listener for its change event.

1. app.js

The change event occurs every time the value of the username field changes. Make sure the event is getting fired correctly, and you got the listener right. The AJAX request uses the POST method here (you can use any according to your need).

$("#username").change(function () {
        var username = $(this).val();
        $.ajaxSetup({
            headers: {
                "X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value,
            }
        });
        $.ajax({
        url: 'validate',
        method: 'POST',
        data: {
          'username': username
        },
        dataType: 'json',
        success: function (data) {
          if (data.taken) {
            alert("Username taken");
          }
        }
      });
    });

2. urls.py and views.py

Let’s add the respective URL and method to urls.py and views.py, below.

from django.urls import path
from . import views

urlpatterns = [
    path('',views.index,name="index"),
    path('validate',views.validate,name="validate"),
]

from django.contrib.auth.models import User

def validate(request):
    username = request.POST['username']
    data = {
        'taken' : User.objects.filter(username__iexact=username).exists()
    }
    return JsonResponse(data)

That was it1 Now, you have learned how to handle AJAX requests in Django. You can also do this using Vanilla JavaScript, the only thing that would be slightly different is app.js.

Thanks for reading.

Adios!