Scribd
Upload
175 views

Django Ajax Json CRUD

This document discusses how to perform CRUD (create, read, update, delete) operations in Django using Ajax and JSON. It provides an example of a user management system that allows adding, updating, and deleting user details. The key steps covered include: 1. Setting up the basic Django and HTML templates 2. Defining a CrudUser model for storing user details 3. Creating views to list existing users and render forms 4. Adding Ajax calls for creating, reading, and updating users without page reloads 5. Rendering the user details and forms using templates

Uploaded by

Xiaochun Luo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
175 views

Django Ajax Json CRUD

This document discusses how to perform CRUD (create, read, update, delete) operations in Django using Ajax and JSON. It provides an example of a user management system that allows adding, updating, and deleting user details. The key steps covered include: 1. Setting up the basic Django and HTML templates 2. Defining a CrudUser model for storing user details 3. Creating views to list existing users and render forms 4. Adding Ajax calls for creating, reading, and updating users without page reloads 5. Rendering the user details and forms using templates

Uploaded by

Xiaochun Luo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Django Ajax CRUD - Execute CRUD Operations - Django https://studygyaan.

com/django/how-to-execute-crud-using-django-ajax-and-json

Django Ajax CRUD - Execute CRUD Operations - Django

24th June 2019 Huzaif Sayyed

Let’s see the example of Python Django Ajax CRUD Operations. Ajax is a way of making web development more dynamic. Using Ajax we can load data from the server without reloading the web pages.
AJAX stands for Asynchronous Javascript and XML.

In this tutorial, you’ll learn how to do CRUD operations using Django, Ajax Form Submission and JSON. We will be using the Class Based Views Functions. CRUD operation is the most basic operation
that we perform on databases. CRUD stands for Create, Read, Update, Delete. We’ll take an example of a User Management System where we will add, update and delete users and its detail. The source
code which we are building is also available on Github – Crud Ajax Django .

This Video Will Help You to Better Understand the Tutorial

Basic Configuration
In this tutorial, we are going to use JQuery for implementing Ajax requests. JQuery is Simple and Easy to learn.

base.html

{% load static %}
<!doctype html>
<html>
 <head>
   <meta charset="utf-8">
   <title>{% block title %}Title{% endblock title %}</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="a
   {% block stylesheet %}{% endblock stylesheet %}
 </head>
 <body>
   <main>
   {% block content %}
   {% endblock content %}
   </main>
   <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
   <script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
   <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
   {% block javascript %}
   {% endblock javascript%}
 </body>
</html>

I am also using Bootstrap for a beautiful user interface. For JQuery and Bootstrap, we are using CDN’s.

Example – Django Ajax CRUD Operations


I will be taking a simple example of User Detail Add Application. I will be working in an app called crud_ajax. For CRUD operation we will be using CrudUser Model.

# models.py

from django.db import models

1 of 9 3/22/20, 10:59 PM
Django Ajax CRUD - Execute CRUD Operations - Django https://studygyaan.com/django/how-to-execute-crud-using-django-ajax-and-json

class CrudUser(models.Model):
   name = models.CharField(max_length=30, blank=True)
   address = models.CharField(max_length=100, blank=True)
   age = models.IntegerField(blank=True, null=True)

Listing User Details Operation

Let’s get started by initially loading all user details. For that, we are going to use ListView.

# Views.py

from django.views.generic import ListView


from .models import CrudUser

class CrudView(ListView):
   model = CrudUser
   template_name = 'crud_ajax/crud.html'
   context_object_name = 'users'

# urls.py

from django.urls import path


from crud_ajax import views

urlpatterns = [
   path('crud/', views.CrudView.as_view(), name='crud_ajax'),
]

Crud.html

{% extends 'base.html' %}
{% load static %}

{% block title %}Django Ajax CRUD{% endblock %}

{% block content %}
<div class="container">
   <h1>Django Ajax CRUD</h1>
   <div class="row">
     <div class="col-md-4 ">
       <h3>ADD USER</h3>
       <form id="addUser" action="">
         <div class="form-group">
           <input class="form-control" type="text" name="name" placeholder="Name" required>
         </div>
         <div class="form-group">
           <input class="form-control" type="text" name="address" placeholder="Address" required>
         </div>
         <div class="form-group">
           <input class="form-control" type="number" name="age" min="10" max="100" placeholder="Age" required>
         </div>
         <button class="btn btn-primary form-control" type="submit">SUBMIT</button>
       </form>
     </div>
     <div class="col-md-8">
       <h3>USERS</h3>
       <table id="userTable" class="table table-striped">
         <tr>
           <th>Name</th>
           <th>Address</th>

2 of 9 3/22/20, 10:59 PM
Django Ajax CRUD - Execute CRUD Operations - Django https://studygyaan.com/django/how-to-execute-crud-using-django-ajax-and-json

           <th colspan="3">Age</th>
         </tr>
         {% if users %}
         {% for user in users %}
         <tr id="user-{{user.id}}">
             <td class="userName userData" name="name">{{user.name}}</td>
             <td class="userAddress userData" name="address">{{user.address}}</td>
             <td class="userAge userData" name="age">{{user.age}}</td>
             <td align="center">
                 <button class="btn btn-success form-control" onClick="editUser({{user.id}})" data-toggle="modal" data-target="#myModal")">EDIT</button>
             </td>
             <td align="center">
                 <button class="btn btn-danger form-control" onClick="deleteUser({{user.id}})">DELETE</button>
             </td>
         </tr>
         {% endfor %}
         {% else %}
           No Users
         {% endif %}
       </table>
     </div>
   </div>
 </div>
 <!-- Modal -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
         <h4 class="modal-title" id="myModalLabel">Update User</h4>
       </div>
       <form id="updateUser" action="">
       <div class="modal-body">
           <input class="form-control" id="form-id" type="hidden" name="formId"/>
           <label for="name">Name</label>
           <input class="form-control" id="form-name" type="text" name="formName"/>
           <label for="address">Address</label>
           <input class="form-control" id="form-address" type="text" name="formAddress"/>
           <label for="age">Age</label>
           <input class="form-control" id="form-age" type="number" name="formAge" min=10 max=100/>
       </div>
       <div class="modal-footer">
           <button type="submit" class="btn btn-primary" >Save changes</button>
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
       </div>
       </form>
     </div>
   </div>
 </div>
{% endblock %}
{% block javascript %}
{% endblock javascript %}

In our HTML code, you will find the Add User form and modal for update user details, we will be going to use it later. So far our template should look like this:

Now it’s time to go with Ajax Calls.

Create and Read User Django Ajax

3 of 9 3/22/20, 10:59 PM
Django Ajax CRUD - Execute CRUD Operations - Django https://studygyaan.com/django/how-to-execute-crud-using-django-ajax-and-json

We will not be using any forms.py instead, we have hardcoded HTML form directly in the template. As you can see in our crud.html file.

If you want Django to make your form then you can use crispy forms.

Let’s create a view to handle the Ajax request.

# Views.py

from .models import CrudUser


from django.views.generic import View
from django.http import JsonResponse

class CreateCrudUser(View):
   def  get(self, request):
       name1 = request.GET.get('name', None)
       address1 = request.GET.get('address', None)
       age1 = request.GET.get('age', None)

       obj = CrudUser.objects.create(
           name = name1,
           address = address1,
           age = age1
       )

       user = {'id':obj.id,'name':obj.name,'address':obj.address,'age':obj.age}

       data = {
           'user': user
       }
       return JsonResponse(data)

Note– We are not rendering the template, we are just returning JsonResponse and we are also using Ajax Get Method.

We are getting the form data using request.GET.get(address, None), address is the form’s input name attribute. Then we are creating a user and sending back the user which we have created so to display it
on the web page.

# urls.py
from django.urls import path
from crud_ajax import views

urlpatterns = [
   path('crud/', views.CrudView.as_view(), name='crud_ajax'),
   path('ajax/crud/create/', views.CreateCrudUser.as_view(), name='crud_ajax_create'),
]

Form in Crud.html for adding Users.

<form id="addUser" action="">


         <div class="form-group">
           <input class="form-control" type="text" name="name" placeholder="Name" required>
         </div>
         <div class="form-group">
           <input class="form-control" type="text" name="address" placeholder="Address" required>
         </div>
         <div class="form-group">
           <input class="form-control" type="number" name="age" min="10" max="100" placeholder="Age" required>
         </div>
         <button class="btn btn-primary form-control" type="submit">SUBMIT</button>
</form>

4 of 9 3/22/20, 10:59 PM
Django Ajax CRUD - Execute CRUD Operations - Django https://studygyaan.com/django/how-to-execute-crud-using-django-ajax-and-json

Now let again add javascript and jquery ajax request in Crud.html which we have created while listing the users

Crud.html

...

{% block javascript %}
<script>
// Create Django Ajax Call
$("form#addUser").submit(function() {
   var nameInput = $('input[name="name"]').val().trim();
   var addressInput = $('input[name="address"]').val().trim();
   var ageInput = $('input[name="age"]').val().trim();
   if (nameInput && addressInput && ageInput) {
       // Create Ajax Call
       $.ajax({
           url: '{% url "crud_ajax_create" %}',
           data: {
               'name': nameInput,
               'address': addressInput,
               'age': ageInput
           },
           dataType: 'json',
           success: function (data) {
               if (data.user) {
                 appendToUsrTable(data.user);
               }
           }
       });
  } else {
       alert("All fields must have a valid value.");
   }
   $('form#addUser').trigger("reset");
   return false;
});
function appendToUsrTable(user) {
 $("#userTable > tbody:last-child").append(`
       <tr id="user-${user.id}">
           <td class="userName" name="name">${user.name}</td>
           '<td class="userAddress" name="address">${user.address}</td>
           '<td class="userAge" name="age">${user.age}</td>
           '<td align="center">
               <button class="btn btn-success form-control" onClick="editUser(${user.id})" data-toggle="modal" data-target="#myModal")">EDIT</button>
           </td>
           <td align="center">
               <button class="btn btn-danger form-control" onClick="deleteUser(${user.id})">DELETE</button>
           </td>
       </tr>
   `);
}
</script>
{% endblock javascript %}

The working of the above JQuery is like that when you submit the form id=’addUser’, It will take the values of the input fields and ajax call will be gone to the server.

$.ajax({
           url: '{% url "crud_ajax_create" %}',
           data: {
               'name': nameInput,
               'address': addressInput,

5 of 9 3/22/20, 10:59 PM
Django Ajax CRUD - Execute CRUD Operations - Django https://studygyaan.com/django/how-to-execute-crud-using-django-ajax-and-json

               'age': ageInput
           },
           dataType: 'json',
           success: function (data) {
               if (data.user) {
                 appendToUsrTable(data.user);
               }
           }
});

Let us understand what the above ajax request commanding to the browser.

URL – where resource is located:

url: '/ajax/crud/create/',

Data Type – Type of Data we want in return:

dataType: 'json',

Return Data – Dictionary of data what we want to send:

data: {
               'name': nameInput,
               'address': addressInput,
               'age': ageInput
     },

Success Response – Once we receive response from ajax, execute the code:

success: function (data) {


               if (data.user) {
                 appendToUsrTable(data.user);
               }
           }

When the user fills the form and submits it. Submitted data goes to the server and after validation into the database and the function appendToUsrTable is called. This appendToUsrTable function is just a
jQuery where it appends the user which we have added using User Add Form. When a user is added it will look like this:

Update User Django Ajax


# Views.py

class UpdateCrudUser(View):
   def get(self, request):
       id1 = request.GET.get('id', None)
       name1 = request.GET.get('name', None)
       address1 = request.GET.get('address', None)
       age1 = request.GET.get('age', None)

       obj = CrudUser.objects.get(id=id1)
       obj.name = name1
       obj.address = address1
       obj.age = age1
       obj.save()

       user = {'id':obj.id,'name':obj.name,'address':obj.address,'age':obj.age}

6 of 9 3/22/20, 10:59 PM
Django Ajax CRUD - Execute CRUD Operations - Django https://studygyaan.com/django/how-to-execute-crud-using-django-ajax-and-json

       data = {
           'user': user
       }
       return JsonResponse(data)

# urls.py

from django.urls import path


from crud_ajaximport views

urlpatterns = [
   path('crud/', views.CrudView.as_view(), name='crud_ajax'),
   path('ajax/crud/create/', views.CreateCrudUser.as_view(), name='crud_ajax_create'),
   path('ajax/crud/update/', views.UpdateCrudUser.as_view(), name='crud_ajax_update'),
]

crud.html

...
// Create Django Ajax Call
$("form#updateUser").submit(function() {
   var idInput = $('input[name="formId"]').val().trim();
   var nameInput = $('input[name="formName"]').val().trim();
   var addressInput = $('input[name="formAddress"]').val().trim();
   var ageInput = $('input[name="formAge"]').val().trim();
   if (nameInput && addressInput && ageInput) {
       // Create Ajax Call
       $.ajax({
           url: '{% url "crud_ajax_update" %}',
           data: {
               'id': idInput,
               'name': nameInput,
               'address': addressInput,
               'age': ageInput
           },
           dataType: 'json',
           success: function (data) {
               if (data.user) {
                 updateToUserTabel(data.user);
               }
           }
       });
  } else {
       alert("All fields must have a valid value.");
   }
   $('form#updateUser').trigger("reset");
   $('#myModal').modal('hide');
   return false;
});

// Update Django Ajax Call


function editUser(id) {
 if (id) {
   tr_id = "#user-" + id;
   name = $(tr_id).find(".userName").text();
   address = $(tr_id).find(".userAddress").text();
   age = $(tr_id).find(".userAge").text();
   $('#form-id').val(id);
   $('#form-name').val(name);
   $('#form-address').val(address);
   $('#form-age').val(age);

7 of 9 3/22/20, 10:59 PM
Django Ajax CRUD - Execute CRUD Operations - Django https://studygyaan.com/django/how-to-execute-crud-using-django-ajax-and-json

 }
}
function updateToUserTabel(user){
   $("#userTable #user-" + user.id).children(".userData").each(function() {
       var attr = $(this).attr("name");
       if (attr == "name") {
         $(this).text(user.name);
       } else if (attr == "address") {
         $(this).text(user.address);
       } else {
         $(this).text(user.age);
       }
     });
}

Update user is similar to Create User. In views.py instead of create query, we are using an update query.

In Ajax Request call we are sending one more parameter id to identify the row in the database.

We are also using two jQuery function – editUser and updateToUserTabel

editUser – is used for updating the form id=”updateUser” which is inside the modal. And updateToUserTabel is used in the success of Ajax request for updating the user detail which we have updated.

Delete User Django Ajax


# Views.py

class DeleteCrudUser(View):
   def get(self, request):
       id1 = request.GET.get('id', None)
       CrudUser.objects.get(id=id1).delete()
       data = {
           'deleted': True
       }
       return JsonResponse(data)

# urls.py

from django.urls import path


from crud_ajax import views

urlpatterns = [
   path('crud/', views.CrudView.as_view(), name='crud_ajax'),
   path('ajax/crud/create/', views.CreateCrudUser.as_view(), name='crud_ajax_create'),
   path('ajax/crud/update/', views.UpdateCrudUser.as_view(), name='crud_ajax_update'),
   path('ajax/crud/delete/', views.DeleteCrudUser.as_view(), name='crud_ajax_delete'),
]

Crud.html

// Delete Django Ajax Call


function deleteUser(id) {
 var action = confirm("Are you sure you want to delete this user?");
 if (action != false) {
   $.ajax({
       url: '{% url "crud_ajax_delete" %}',
       data: {
           'id': id,

8 of 9 3/22/20, 10:59 PM
Django Ajax CRUD - Execute CRUD Operations - Django https://studygyaan.com/django/how-to-execute-crud-using-django-ajax-and-json

       },
       dataType: 'json',
       success: function (data) {
           if (data.deleted) {
             $("#userTable #user-" + id).remove();
           }
       }
   });
 }
}

Deleting User using Ajax Django is one of the easiest ways. In ajax request, we are sending an id of the object which we want to delete to view. In View, delete query is executed and deleted flag is sent in
Response. In success, we directly write the jQuery function to remove the section which we want to remove from the table using id dynamically.

Conclusion
We are using Class-based views, which are simple and recommendable. We have used Jquery Ajax and JSON and Python. For CSS and styling, we have used Bootstrap. Python django crud tutorial . django
jquery ajax. crud operation in django example. django confirm delete template ajax.

The code is available on GitHub – https://github.com/studygyaan/How-To-Execute-CRUD-Using-Django-Ajax-and-JSON

9 of 9 3/22/20, 10:59 PM

You might also like