Posted: 28 February 2019 | Post By: Jai Singhal |
13 min read |
Hello and Welcome to our next exciting post where we explore different methods to implement AJAX in Django project. We will be using both class bases views and function based views in this post. We will take the help of several frontend libraries such as JQuery and Bootstrap4.
What is AJAX?
How AJAX Works?
An event occured in our web page like some form submission, some clicking of button etc.
An XMLHttpRequest object is created and it sends request to the server
The server responds to the request and respond with some sort of data(in JSON) to the web page again.
Many of the time we want to perform some asynchronous calls to the server to GET or POST some sort of data without refreshing your current page.
We will be using jQuery and Bootstrap v4 for this tutorial, so initially, we have included these libraries into our base.py template
We will be discussing several examples here that readily used in every website and it will help you get the hands-on how to implement AJAX in your Django project.
Example 1: Basic Contact Form
Request: POST request
Views: Function based views(FBV) and Class Based views(CBV)
I want to make this example which is easy to understand for the newbie, however, it is also helpful for the intermediates. So let’s get started.
Let’s create a basic Contact Model
Note that, I have used a path name for the contact_submit, this will useful in making the AJAX request
In ContactForm class, I have done some little changes in the basic form rendering. In __init__ method, I have added form-control class to every form input element, to make it Bootstrap4 powered.
Now, this is the section where we need to put some attention to understand the AJAX in a better way. I have created two Function based views(FBV) which deal with GET and POST respectively.
In the POST view function i.e., postContact() function, we are first checking whether the POST request made is AJAX or NOT, and checks for POST request.
Moving to frontend section, let’s first extends the base.html which is discussed above.
Render the form which was created above enclosing form tag along with csrf_token and submit button. Note the usage of template blocks carefully.
Making Class based views
To convert the above example from Function based views to class based views(CBV), we just need to transform our views.py only, and also make a route for the view in urls.py
In the FBV, we have used the 2 function views, that can be wrap in the single class containing two methods namely GET and POST with a single url route.
Example 2: Get User Details
Request: GET request
Views: Function based views(FBV)
If you get comfortable with the above example, let’s move to our second example. This example helps you to integrate the AJAX GET request in your Django project. We will be using Function based views. In this example, we will try to get the user information for the user which is selected. We will use the default User class provided by Django.
The directory structure of the app will be as follows
Create the url route for the displaying the user and an AJAX request url
The views are pretty similar with above example views, with the slight change i.e., the method GET in replace of POST and way of wrapping the object into the dictionary and sending the response
Moving to the frontend part, after selecting username option from the select box, the AJAX call will be made to our Django server with the username which is selected, and the Django server will respond with information for the respective username in its response, which is then rendered in the table body.