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 !
Top comments (0)