How to Add AJAX Functionality to a Django Website with jQuery


In this article, we show how to add AJAX functionality to a Django website with jQuery.

With AJAX, we can post data to our database and retrieve data from our database asynchronously, meaning without any page refresh needed.

Basically, with AJAX, we can do any behind-the-scene (server-side) task, without it being noticeable to the end user. The default action would be that in order to do any server-side activity, whether to post data to a database or retrieve data from a database, would be to refresh the page. AJAX makes this unnecessary and, thus, creates a better experience for the end user.

So we will show in this article how to add AJAX to a Django website.

In order to do anything that you want with AJAX, there are really only 2 requests that you need to know: a POST request and a GET request.

With an AJAX POST request, we can do any type of server-side activity, such as store data in our database, delete data from our database, edit existing data from our database, etc.

With an AJAX GET request, we can get any type of data we want, usually it's getting data from one of the databases you've created. You may want to get data from a user, or get the number of page views the page has, etc. However, you really can get data from any source such as another website.

So how can we incorporate AJAX into our Django website to perform POST and GET requests, so that we do not have to refresh the page?

On this page, we will show how to do this with an HTML form.

So let's say we want to retrieve the number of page views a page has received.

The value of these page views is stored in a database table.

We want to retrieve the number of page views and then add 1 to it and then display the new number of page views- all done asynchronously, which is without the need for a page refresh.

How can this be done?

The following code below shows us how to do this. This requires both a POST request (to add 1 to the existing count) and a GET request (to get the current number of page views).

So when the page has finished loading, we run the AJAX function with a method of 'POST'.

With Django, in order to run AJAX functions, you specify the URL that you want the AJAX code to operate from.

Remember that in Django, every URL has a function that tells it what to do.

So you simply write the function that gets the number of views from the database table and you add 1 to this number of views.

The following code below performs this function.

This is what is done for the POST request side of the equation of our AJAX function.

With AJAX, you can run (and often do) a success function.

A success function is a function that will be executed when the preceding AJAX function has been successfully executed. Being that we now want to retrieve the newly updated number of page views, we perform a GET request using the get() function.

Again, it's all URL-based. In order to do a get request, you specify a URL. This URL has an associated function, which you will create that simply retrieves the number of page views that the page has received.

With a GET request, unlike a POST request, you don't want to render a template tag. With a GET request, you want to return the data value that you want returned, which in this case is the number of page views. So with a GET request, instead of rendering a template to be displayed, you return just the data, and this is done with the HttpResponse() function.

This is shown in the following code below.

So in the Python function above, we simply get the page views from the database and return this using the HttpResponse() function, specifying the page views within this function.

Now if you go back to the success function from our AJAX code, 2 parameters are specified within this success function: data and status.

data represents the data we returned from the GET request, which is the number of page views.

We now just use simple jQuery to update our page by using the jQuery html() function to overwrite the value within the HTML div element that has an id attribute of "documentviews".

And this is how we can add AJAX function to a Django website in order to perform POST and GET requests.

With POST and GET requests, we can basically perform any function that we want. POST requests are very diverse. You can use a POST request to perform any server-side activity besides retrieval of information. With a POST request, we can post, edit, or delete data. With a GET request, we get data.

And this is how to add AJAX functionality to a Django website with jQuery.

Related Resources

How to Perform an AJAX POST Request in Django

How to Perform an AJAX GET Request in Django

HTML Comment Box is loading comments...