How to Perform an AJAX POST Request in Django with jQuery

In this article, we show how to perform an AJAX POST request in Django with jQuery.

A POST request is important in doing things in AJAX, because with a POST request, you can perform a dynamic number of functions, including posting data to a database (or storing data to a database), editing existing data in a database, and deleting data from a database. Along with the GET request, you can perform any type of function needed in AJAX.

In this article, we're going to focus on how to perform a POST request.

As an example, we will have a basic form in which a user enters his/her first and last name.

With AJAX, we will then store this data into a database table asynchronously- no page refresh needed.

So let's get to it.

Let's say we have the following HTML representing a form.

<form id="userinfoform"> {% csrf_token %} First name: <input type="text" id="firstname"> Last name: <input type="text" id="lastname"> </form>

So the form above is very basic. The form has an id of 'userinfo'.

The form has 2 fields, first name and last.

Each field has an id, respectively, firstname and lastname.

So you see we have a basic form.

How can we now incorporate AJAX into it so that we can take this data from this form and post it to our database without a page refresh?

The following jQuery code below allows us to do this.

<script> $(document).ready(function(){ $('#userinfoform').on('submit', function(e){ $.ajax({ method:'POST', url:'/documents/{{eachdocument.slug}}/updatedocumentviews/', data:{ firstnamevalue:$('#firstname').val(), lastnamevalue:$('#lastname').val(), csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val() }, success: function() { alert('Data Successfully Posted'); }, }); }); }); </script>

When the form is submitted, then we run the AJAX function to post the data to our desired database table.

For the AJAX method, we specify, 'POST', because this we are looking to post data to our database table.

We specify the URL that we want to operate from. Every URL has a view that executes code that you want run, either a class-based or a function-based view. It is in this view that we post the data that the user has entered (the first and last name) into the database table.

The next thing we must do is we must get the data that the user has entered into the form. We must retrieve the first name field and the last name field that the user has entered into the form. We do this using standard jQuery. Being that the fields have ids, we use this attribute to retrieve their values. We put their values into the variables, firstnamevalue and lastnamevalue. These are important, because we will use these in our view to get the values that the user and has entered and then put them in our database table.

So the Python function-based view that I created to put the user's first name and last name into the database table is shown below.

from django.shortcuts import render from accounts.models import UserInfo def postuserinfo(request): if request.method == 'POST': userinfo= UserInfo() userinfo.firstname= request.POST.get('firstnamevalue') userinfo.lastname= request.POST.get('lastnamevalue') userinfo.save() return render(request,'accounts/userinfoform.html')

So we have a very simple function-based view which posts the data that the user has entered into the form to the UserInfo database table.

We save this data.

Going back to the jQuery code, we then simply have an alert() function, which prints out, 'Data Successfully Posted'.

In production, you may not have this alert() function. Instead, you may put either your own custom function displaying something prettier than an alert function, or you'll have a get() function, which will then retrieve data after performing a POST function.

Again, with a POST request, you can do anything. It doesn't have to be always posting data. It can be editing existing data or deleting data; you simply would put this functionality into the function- or class-based view.

The AJAX POST request is vital for using AJAX to do a variety of tasks in Django.

And this is how to perform an AJAX POST request in Django with jQuery.

Related Resources

How to Perform an AJAX GET Request in Django