![\"AJAX](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Google-Search.png\")
<\/a><\/p>\nThis tutorial will become easy to understand if you know JavaScript. It will be amazing if you also have some experience with DOM (Document Object Model)<\/strong>.<\/p>\n We talked about AJAX and how it is present in our web pages. Now, let\u2019s learn why we need AJAX in Django.\u00a0AJAX is an acronym of Asynchronous JavaScript and XML<\/strong>.<\/p>\n It is a mixture of technologies implemented to solve a very serious problem.\u00a0It utilizes XMLHttpRequest objects<\/em> to transmit and receive data.<\/p>\n Imagine that you are reading your emails. Now, think that for every new mail received, you have to reload the entire page which involves some steps:<\/p>\n This approach is very time-consuming and unproductive. The problem becomes more serious when urgent replies are demanded by the recipient. Apparently, it was a real situation for websites before 2003.<\/p>\n In late 2003, all the browsers solved the above problem by using XHR. XHR is acronym for XMLHttpRequest<\/strong> Objects. Browsers use the XHR object to communicate with the server. This transmission happens without reloading the whole page.<\/p>\n XMLHttpRequest API is behind the scenes handling the XHR requests.<\/p>\n Now, almost all browsers have XMLHttpRequest APIs. This made applications like Gmail, Google Maps become a reality.<\/p>\n AJAX is nothing but a combination of JavaScript and XHR object. The concept is simple:<\/p>\n Html Format (This contains HTML elements).<\/p>\n JSONP Format (It is JSON but only when the response comes from a different domain).<\/p>\n Script (This contains some JavaScript to be changed in page).<\/p>\n Similarly, a failure response can be formatted.<\/p>\n AJAX has multiple implementations but this is the common flow.<\/p>\n AJAX is very common in web applications. For example – when you like a post on LinkedIn, there are certain actions performed at the back-end but at the front-end, the color\u00a0of Like button changes.<\/p>\n When you clicked that button, an XHR object was sent to the server. The server receives the request and registers a like for that post. Then, the server sends a success response and the Like<\/strong> button turns to Blue <\/strong><\/p>\n jQuery is one of the most popular libraries of JavaScript. Many advanced frameworks like Angular JS, React,<\/em> etc are based on jQuery. It is a very useful library providing functions with DOM of web pages. To use bootstrap\u2019s JavaScript part, jQuery is essential.<\/p>\n We are using jQuery for the following reasons:<\/p>\n There are many browsers which use different XHR APIs. These APIs parse request and response in a slightly different manner. Keeping your code up-to-date while also making it platform independent can be difficult. jQuery provides you with a built-in solution and takes care of all these things for you.<\/p>\n Since jQuery is actively developed thus, the code is kept updated frequently.<\/p>\n jQuery contains many DOM objects and related methods. These objects can be used as per your need and jQuery makes it more convenient to use.<\/p>\n jQuery is heavily used in the IT industry. For any web developer, they will deal with jQuery at some point. jQuery<\/a> has many features and it will be an important skill for you in the long run.<\/p>\n There are many popular frameworks like Angular Js, react js based on jQuery. Bootstrap JavaScript is also based on jQuery. jQuery is basically everywhere on JavaScript frameworks.<\/p>\n These reasons are good enough for anyone to learn and use jQuery. There are more ways by which we can use AJAX in Django like, dajax, dajaxice, etc. These applications are made such that there is minimal JavaScript for AJAX.<\/p>\n In the real world, developers prefer jQuery, therefore, we are going to make an application based on that.<\/p>\n We are going to create a simple project where users can like a post. For this, we will be adding posts through admin model. Let’s follow these steps:<\/p>\n We all know how to create a new application in Django<\/strong><\/em>. In your PowerShell\/ Terminal, execute this command:<\/p>\n Code Display:<\/strong><\/p>\n Now, install the application in settings.py of project. Add the name of the application in INSTALLED_APPS list.<\/p>\n Models are the tables in our databases.\u00a0Paste this code in post\/ models.py file.<\/p>\n Code<\/strong>:<\/strong> <\/em><\/p>\n Output:<\/strong><\/p>\n Here, Post and Like are two models. We are using the Foreign Key Field<\/strong>. It is used to define many-to-one relationships between models. The post variable in Like model will contain the primary key of the post that\u00a0we added. Thus, we can then refer to that post’s data.<\/p>\n We are not using it in this example though.<\/p>\n Open post\/ view.py file and paste this code in it.<\/p>\n Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n We created two view functions. The first one is to render all the posts and the second one is for the\u00a0like function.<\/p>\n The like function exists to handle the AJAX request from like button. As you can see, it is similar to the function that we use in forms.<\/p>\n The like function will first check for the request. If it is the GET method, then it will read the data. The data is the id of the post we liked. Then, we create a Like class object and save its id equal to data. Then, we store the object in our database.<\/p>\n At last, we are returning an HttpResponse. This response will do nothing in our code as we are not printing the same. We could have just passed a script. These can be utilized according to one\u2019s use case.<\/p>\n Here comes the main part, templates, as AJAX is a front-end technology. To implement this, create some directories.<\/p>\n Now, paste the html in index.html<\/p>\n Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n There are two important parts in this HTML file.<\/p>\n Since jQuery is a JavaScript library, so it is essentially a static file for the server. It can be imported the same as bootstrap and other files. We chose to use it directly from CDN. The link can be found on jQuery’s official website.<\/p>\n Similarly, we used the link tag with bootstrap.<\/p>\n Here, is the important part. If you have no idea of DOM, JavaScript Objects<\/strong><\/em>, then this might be difficult to understand. We will try our best to make it relatable.<\/p>\n Focus on <script><\/script> at the end of document. We have put our AJAX code there.<\/p>\n We are using some of the properties of jQuery to call the object. The like button is the class of button that we are going to click. When the button is clicked, the function inside it is executed. That function has some objects in it.<\/p>\n This is an XHR<\/strong> object. Actually, this is the speciality of $.ajax() method<\/strong>. It is what will make our code run on multiple browsers. Inside that, there is a JavaScript Object Datatype. JavaScript Object is similar to dictionaries in Python. This is for Pythonistas who don\u2019t know JavaScript.<\/p>\n Now, you can relate it easily.<\/p>\n 1. Type key:<\/strong>\u00a0It takes in the method of request that we will send. Here, XHR is sent over the GET request.<\/p>\n 2. URL key:<\/strong> This is the URL of the call back function on the server. Remember the view function we created? This code will call that function without reloading the page.<\/p>\n 3. Data key:<\/strong> This key contains the data that we are sending to call back function. In this example, it contains the id of the post. It can be an object and can contain multiple values. You can also pass it in a JSON. It depends on your use case.<\/p>\n 4. Success method:<\/strong> JavaScript Objects have methods too. You can define methods like this easily. The methods are called properties of Objects. Success is a built-in response for $.ajax() method<\/strong>. This method will be executed when the AJAX request returns with a success response. It is one of the conveniences that jQuery provides to programs.<\/p>\n 5. Inside Success:<\/strong> There are two methods that we are executing inside success. The first one will remove the class inside the parenthesis (). Similarly, the other one will add the class.<\/p>\n It is as simple as that. No, worries if you didn\u2019t get it right the first time. Now, comes the Python part. You just created a very beautiful app. Now we have to link all the components together.<\/p>\n Make a new python file in post directory.<\/p>\n Inside post\/urls.py, paste this Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n Now, configure your main urls.py file.<\/p>\n Add this to your urlpatterns list:<\/strong><\/p>\n Output:<\/strong><\/p>\n Now, open post\/admin.py file.<\/p>\n Paste this code:<\/strong><\/p>\n Output:<\/strong><\/p>\n We are just registering our models in Django admin.<\/p>\n Now, open console\/ PowerShell\/ Terminal and run these commands in order.<\/p>\n Code Display:<\/strong><\/p>\n Start your server and add some posts from admin.<\/p>\n URL:<\/strong> http:\/\/localhost:8000\/admin\/<\/p>\n Populate your database with some posts.<\/p>\n We already started the server. Now, search for URL<\/strong>:<\/p>\n http:\/\/localhost:8000\/ajax\/<\/p>\nAJAX in Django<\/h3>\n
The Problem that AJAX Solved<\/h3>\n
\n
How AJAX works in Django<\/h3>\n
\n
<\/a><\/p>\n\n
1. Text Format<\/strong><\/h4>\n
2. JSON Format<\/strong><\/h4>\n
3. XML Format<\/strong><\/h4>\n
\n
Example of AJAX in Real World<\/h4>\n
<\/a><\/p>\nUsing jQuery for AJAX in Django<\/h4>\n
\n
\n
\n
\n
<\/a><\/p>\nSimple Post App and Like Button<\/h3>\n
\n
python manage.py startapp post<\/pre>\n
<\/a><\/p>\n<\/a><\/p>\n\n
from django.db import models\r\n\r\n# Create your models here. #DataFlair class Post(models.Model): post_heading = models.CharField(max_length = 200)\r\n post_text = models.TextField()\r\n post_author = models.CharField(max_length = 100, default = 'anonymous')\r\n\r\n\r\nclass Like(models.Model):\r\npost = models.ForeignKey(Post, on_delete = 'CASCADE')\r\n\r\n<\/pre>\n
<\/a><\/p>\n\n
from django.shortcuts import render\r\nfrom .models import Post, Like\r\nfrom django.http import HttpResponse\r\n# Create your views here.\r\n\r\n#DataFlair #AJAX_tutorial\r\ndef index(request):\r\n posts = Post.objects.all()\r\n return render(request, 'post\/index.html', { 'posts': posts })\r\n\r\ndef like(request):\r\n if request.method == 'GET':\r\n post_id = request.GET['post_id']\r\n likedpost = Post.objects.get(id = post_id )\r\n m = Like( post=likedpost )\r\n m.save()\r\n return HttpResponse('success')\r\n else:\r\n return HttpResponse(\"unsuccesful\")<\/pre>\n<\/a><\/p>\n\n
\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Like Post App<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\">\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.4.1.js\" integrity=\"sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=\" crossorigin=\"anonymous\"><\/script>\r\n<\/head>\r\n<body>\r\n <div class = \"display-3 color-red\"><center>DataFlair AJAX Tutorial<br>Post APP<\/center><\/div>\r\n {% for post in posts %}\r\n <div class = 'container jumbotron'>\r\n <h3 class=\"display-5\">{{ forloop.counter }}. {{ post.post_heading }}<\/h3>\r\n<p class=\"lead\">{{ post.post_text }} <\/p>\r\n <p>\r\n <div type=\"text\/css\" class = \"container\">Author : {{ post.post_author }}<\/div> \r\n <a class=\"likebutton btn btn-primary btn-lg\" id=\"like{{ post.id }}\" href=\"#\" data-catid=\"{{ post.id }}\">Like<\/a> <\/p> <p id=\"message{{post.id}}\">\r\n<\/p>\r\n<\/div>\r\n{% endfor %}\r\n\r\n<script type=\"text\/javascript\"> \r\n$('.likebutton').click(function(){ \r\nvar id; \r\nid = $(this).attr(\"data-catid\"); \r\n$.ajax( \r\n{ \r\n type:\"GET\", \r\n url: \"like\", \r\n data:{ \r\n post_id: id \r\n}, \r\nsuccess: function( data ) \r\n{ \r\n $( '#like'+ id ).removeClass('btn btn-primary btn-lg'); \r\n $( '#like'+ id ).addClass('btn btn-success btn-lg'); } }) });\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n<\/a><\/p>\n\n
<\/a><\/p>\n\n
<\/a><\/p>\n
\n<\/a><\/p>\n\n
from django.conf.urls import url\r\nfrom django.urls import path\r\nfrom . import views\r\nurlpatterns = [\r\n#DataFlair #AJAX tutorial\r\n path('', views.index, name='index'),\r\n path('like\/', views.like, name='like'), ]\r\n\r\n<\/pre>\n<\/a><\/p>\npath('ajax\/', include('post.urls')),<\/pre>\n<\/a><\/p>\n\n
from django.contrib import admin\r\nfrom .models import *\r\n# Register your models here.\r\n#DataFlair #AJAX\r\nadmin.site.register(Post)\r\nadmin.site.register(Like)<\/pre>\n
<\/a><\/p>\npython manage.py makemigrations\r\npython manage.py migrate\r\n\r\n<\/pre>\n
<\/a><\/p>\n
\n<\/a><\/p>\n\n