|
AJAX or Asynchronous JavaScript And XML is a set of web development techniques using web technologies on the client-side to create asynchronous web requests. In simpler words, AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that updating parts of a web page is possible, without reloading the whole page. We can make AJAX requests from Django templates using JQuery. With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post and you can load the external data directly into the selected HTML elements of your web page. In this tutorial, we will learn how to make AJAX HTTP GET and POST requests from Django templates. Pre-RequirementsI am assuming you have a basic working knowledge of Django. Therefore, I am not going into the project setup part in case you need help with that I recommend reading the following articles. This is a very basic project with an app called AJAX and I am using bootstrap and Django crispy form for styling. Github repo –https://github.com/TheAbhijeet/Django-with-JQuery-and-AJAX Making AJAX GET requests with Django and JQueryThe HTTP GET method is used to retrieve data from the server. In this section, we will create a signup page where we will check the availability of a username using JQuery and AJAX in Django templates. This is a very common requirement for most modern apps.
views.py from django.contrib.auth.models import User
from django.contrib.auth.decorators import login_required
from django.http import JsonResponse
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth import login, authenticate
from django.shortcuts import render, redirect
from django.views.generic.edit import CreateView
from django.urls import reverse_lazy
@login_required
def home(request):
return render(request, 'home.html')
class SignUpView(CreateView):
template_name = 'signup.html'
form_class = UserCreationForm
success_url = reverse_lazy('home')
def form_valid(self, form):
valid = super().form_valid(form)
login(self.request, self.object)
return valid
def validate_username(request):
'''Check username availability'''
username = request.GET.get('username', None)
response = {
'is_taken': User.objects.filter(username__iexact=username).exists()
}
return JsonResponse(response)
So here we have three views first one is the Next is Finally The urls.py from django.urls import path
from .views import home, SignUpView, validate_username
urlpatterns = [
path('', home, name='home'),
path('signup', SignUpView.as_view(), name='signup'),
path('validate_username', validate_username, name='validate_username')
]home.html signup.html {% load crispy_forms_tags %}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='stylesheet' href='https://stackpath./bootstrap/4.5.2/css/bootstrap.min.css'
integrity='sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z' >
</head>
<body>
<div class='container mt-5 w-50'>
<form id='signupForm' method='POST'>
{% csrf_token %}
{{ form|crispy }}
<input type='submit' name='signupSubmit' class='btn btn-success btn-lg' />
</form>
</div>
{% block javascript %}
<script src='https://ajax./ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>
$(document).ready(function () {
// catch the form's submit event
$('#id_username').keyup(function () {
// create an AJAX call
$.ajax({
data: $(this).serialize(), // get the form data
url: '{% url 'validate_username' %}',
// on success
success: function (response) {
if (response.is_taken == true) {
$('#id_username').removeClass('is-valid').addClass('is-invalid');
$('#id_username').after('<div class='invalid-feedback d-block' id='usernameError'>This username is not available!</div>')
}
else {
$('#id_username').removeClass('is-invalid').addClass('is-valid');
$('#usernameError').remove();
}
},
// on error
error: function (response) {
// alert the error if any error occured
console.log(response.responseJSON.errors)
}
});
return false;
});
})
</script>
{% endblock javascript %}
</body>
</html>
Let’s breakdown the template is small pieces to understand better. Inside the Then we are rending the Django form using <script src='https://ajax./ajax/libs/jquery/3.5.1/jquery.min.js'></script>
Next, inside the javascript block, we are pulling JQuery from google CDN you can download it locally as well. Then we have another script having ready method, The $('#id_username').keyup(function() {
// create an AJAX call
$.ajax({
data: $(this).serialize(), // get the form data
url: '{% url 'validate_username' %}',
// on success
success: function(response) {
if (response.is_taken == true) {
$('#id_username').removeClass('is-valid').addClass('is-invalid');
$('#id_username').after('<div class='invalid-feedback d-block' id='usernameError'>This username is not available!</div>')
} else {
$('#id_username').removeClass('is-invalid').addClass('is-valid');
$('#usernameError').remove();
}
},
// on error
error: function(response) {
// alert the error if any error occured
console.log(response.responseJSON.errors)
}
});
return false;
});The AJAX method is triggered by Save the files and run the server you should see AJAX in action. Making AJAX POST requests with Django and JQueryThe HTTP POST method is used to send data to the server. In this section, we will learn how to make POST requests with JQuery and AJAX in Django templates. We will create a contact form and save the data provided by the user into the database with JQuery and AJAX.
models.py forms.py from django import forms
from .models import Contact
class ContactForm(forms.ModelForm):
class Meta:
model = Contact
fields = '__all__'
urls.py views.py from django.http import JsonResponse
from django.shortcuts import render
from .forms import ContactForm
def contact_form(request):
form = ContactForm()
if request.method == 'POST' and request.is_ajax():
form = ContactForm(request.POST)
if form.is_valid():
name = form.cleaned_data['name']
form.save()
return JsonResponse({'name': name}, status=200)
else:
errors = form.errors.as_json()
return JsonResponse({'errors': errors}, status=400)
return render(request, 'contact.html', {'form': form})
In the view, we are verifying the ajax request with contact.html Let’s break down the template in smaller modules to understand it better. First, we are importing bootstrap inside the head tag from CDN then inside the body, we are reading the form with Then inside the javascript block first, we are loading JQuery from the CDN. <script src='https://ajax./ajax/libs/jquery/3.5.1/jquery.min.js'></script>Then Inside the On form submit we are invoking the ajax method which is serializing the form data and sending it to the given URL. On a successful call, we are showing an alert dialog with a dynamic message based on the user name. Making AJAX POST requests with Django and JQuery using Class-based viewsviews.py from django.views.generic.edit import FormView
from django.http import JsonResponse
class ContactFormView(FormView):
template_name = 'contact.html'
form_class = ContactForm
def form_valid(self, form):
'''
If the form is valid return HTTP 200 status
code along with name of the user
'''
name = form.cleaned_data['name']
form.save()
return JsonResponse({'name': name}, status=200)
def form_invalid(self, form):
'''
If the form is invalid return status 400
with the errors.
'''
errors = form.errors.as_json()
return JsonResponse({'errors': errors}, status=400)
We just need to return a JSON object from the |
|
|
