Hi guys !

So, its been a while since i wrote an article. Well, before i start one, amidst all the chaos in the real world, i hope everyone is doing fine and is staying indoors. Stay safe guys !

Let's get started then.

What is Ajax ?

Well, ajax is an asynchronous web technique to send and receive data. So, what is the big deal ? Why is it important ? Well, you could send some data, process it, then receive the processed data and perform some action based on it. And, all this could happen without a page reload. You would only need to reload the parts of the webpage that needs to be changed.

Django and Ajax

So, now that you know the benefits of using django and ajax. Where all could you apply it ? I've seen it being applied in forms and on button clicks mostly. But theoretically, you could apply it anywhere, you could trigger a javascript event.

So, you could combine it with a django web template and get some dynamic feedback. Like, clicking a like button and the color changes from grey to blue, or, checking if the username you are typing is already been taken, etc.

Creating a password strength checker

Now, lets use ajax to check the strength of the password that a user is typing. Disclaimer: This is not the actual way to check the strength of a password, but for this article, i'm simply going to check the length of the password.

So, in your django template file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  <!-- Add Jquery for AJAX to work -->
    <title>Document</title>
  </head>
  <body>
    <input id="pwd_text" type="password" />
    <p id="ajax_response"></p>
  </body>
</html>

<script>
  $(document).ready(function() {
    $("#pwd_text").change(function() {
      var pwd_value = this.value;
      $.ajax({
        type: "POST",
        url: "{% url 'check-pwd' %}",
        data: { csrfmiddlewaretoken: "{{ csrf_token }}", pwd: pwd_value },
        dataType: "json",
        success: function(data) {
          if (data.status === "weak") {
            $("#ajax_response").text("Weak");
          } else if (data.status === "medium") {
            $("#ajax_response").text("Medium");
          } else {
            $("#ajax_response").text("Strong");
          }
        }
      });
    });
  });
</script>

Your urls.py file

urlpatterns = [
    url(r'^check/pwd$', check_pwd, name="check-pwd"),
]

Your views.py file.

from django.http import JsonResponse


def check_pwd(request):
    pwd = request.POST.get('pwd')
    if len(pwd) < 6:
        data = {
            'status': 'weak'
        }
    elif len(pwd) > 6 and len(pwd) < 10:
        data = {
            'status': 'medium'
        }
    else:
        data = {
            'status': 'strong'
        }
    return JsonResponse(data)

Now, to explain what is happening here, i'm using the event 'change' to monitor the password input field. The value from the field is captured and send to the url link with namespace 'check-pwd'. That link is tied to a python function which will process the password and evaluate whether it is weak, medium or strong based on the length. It will inturn return a status field with the corresponding values. Those values are checked in the success function and the value is then send to the paragraph element 'ajax_response'. Now, you could see the visual reponse to your typing.

So, thats one of the ways you could use ajax in a django project. Hope you guys learned something new and apply this to your own projects.

Thanks and have a great day !

Blog

Django and Ajax

Heinek Halwin

What is Ajax ?

Django and Ajax

Creating a password strength checker

Join Our Newsletter. No Spam, Only the good stuff.

Related