DEV Community

Cover image for Working with AJAX request and Django
Shubham Singh Kshatriya
Shubham Singh Kshatriya

Posted on

Working with AJAX request and Django

Hey there! There are a lot of scenarios where we want to use AJAX requests in web applications. It helps web applications to be much faster and dynamic. In this post, we will explore how we can handle AJAX requests in Django and we will be using function-based views and jQuery for simplicity. Without wasting any time, let's jump to the interesting part.

Initial set-up

Here is my base.html file. The jQuery library is added at the end of this page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
    {% block content %}
    {% endblock %}
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="{% static 'js/app.js' %}"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Sample

For this tutorial, 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 the username exists or not.

urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('',views.index,name="index"),
]
Enter fullscreen mode Exit fullscreen mode
views.py
from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return render(request,'register.html')
Enter fullscreen mode Exit fullscreen mode
register.html
{% extends 'base.html' %}

{% block content %}
<div class="col-lg-4">
<form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="text" class="form-control mb-3" id="username" placeholder="Username">
    <input type="password" class="form-control mb-3" placeholder="Password">
    <input type="password" class="form-control mb-3" placeholder="Repeat Password">
    <input type="button" value="Submit" class="btn btn-primary">
</form>
</div>
{% endblock %}
Enter fullscreen mode Exit fullscreen mode

And this is how the view looks.

Alt Text

AJAX Request

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

app.js

Here 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");
          }
        }
      });
    });
Enter fullscreen mode Exit fullscreen mode
views.py
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)
Enter fullscreen mode Exit fullscreen mode

Add a route for this view.

urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('',views.index,name="index"),
    path('validate',views.validate,name="validate"),
]
Enter fullscreen mode Exit fullscreen mode

And here's the output.

Alt Text

That was it. Now, you have learned to handle AJAX requests in Django. You can also do this using plain JavaScript, just the app.js would be slightly different. Thank you for your precious time.

Adios!

Top comments (0)