Skip to content
Related Articles

Related Articles

Handling Ajax request in Django
  • Difficulty Level : Basic
  • Last Updated : 30 Mar, 2020

aj1

Introduction

This tutorial explains how to carry out a ajax request in Django web framework. We will create a simple post-liking app as a part of example.

Glossary

  • Project Initialization
  • Create models
  • Create views
  • Write urls
  • Carry out request with Jquery AJax.
  • Register models to admin and add some posts.

 Implementation:



1. Initiate the Django Project – Here I am assuming that you are done with Django Installation.

  • To Create a Django Project execute:
    $ django-admin startproject django_example
    
  • After creating a project we need to create a django app. To create an app say “post” execute the following:
    $ cd django_example
    $ python manage.py startapp post
    
  • Go to django_example/settings.py add the post app
  • Now you will have files something like this:

directory_structure

2. Create models: To create models, go to post directory and open models.py .

  • In models.py, first create post table. To create post table you’ll need to write:
    class Post(models.Model):
        post_heading = models.CharField(max_length=200)
        post_text = models.TextField()
            def __unicode__(self):      # If python2 use __str__ if python3
                 return unicode(self.post_heading)
  • Then In models.py, create like table. To create like table you’ll need to write:
    class Like(models.Model):
        post = models.ForeignKey(Post)
  • Make Migration and migrate step:
    $ python manage.py makemigrations
    $ python manage.py migrate
    

After completing this steps, we have our database tables ready to use.

3. Create Views:

To create views, we need to go to post directory and open views.py

  • First, import Previously created Models and HTTPresponse
      from .models import Post, Like
      from django.http import HttpResponse
  • Create index view to render all the posts. Code sample:
    def index(request):
        posts = Post.objects.all()  # Getting all the posts from database
        return render(request, 'post/index.html', { 'posts': posts })
  • Create likePost view to like a post. This view will be called when we will hit a “like button”. Code sample:
    def likePost(request):
        if request.method == 'GET':
               post_id = request.GET['post_id']
               likedpost = Post.objects.get(pk=post_id) #getting the liked posts
               m = Like(post=likedpost) # Creating Like Object
               m.save()  # saving it to store in database
               return HttpResponse("Success!") # Sending an success response
        else:
               return HttpResponse("Request method is not a GET")

Once our view get created we will move to write template and jQuery to perform ajax request.

4. Create URLs:



To create urls, open django_example/urls.py. Your django_example/urls.py should look something like this:

from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [
     url(r'^admin/', admin.site.urls),
     url(r'^', include('post.urls')),   # To make post app available at /
   ]

To create urls, create file post/urls.py. Your post/urls.py should look something like this:

from django.conf.urls import url
from . import views
urlpatterns = [
        url(r'^$', views.index, name='index'),  # index view at /
        url(r'^likepost/$', views.likePost, name='likepost'),   # likepost view at /likepost
   ]

5. Making templates and carrying out ajax request:

  • Create a file post/templates/post/index.html. Code sample:
<!DOCTYPE html>
<html>
<head>
    <title>Like Post App</title>
</head>
<body>
    <p id="message"></p>
    {% for post in posts %}
    <h3>{{ forloop.counter }}) {{ post.post_heading }}</h3>
    <p>{{ post.post_text }} </p>
    <a class="likebutton" id="like{{post.id}}" href="#" data-catid="{{ post.id }}">Like</a>
    {% endfor %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript">
    $('.likebutton').click(function(){
    var catid;
    catid = $(this).attr("data-catid");
    $.ajax(
    {
        type:"GET",
        url: "/likepost",
        data:{
                 post_id: catid
        },
        success: function( data ) 
        {
            $( '#like'+ catid ).remove();
            $( '#message' ).text(data);
        }
     })
});
</script>
</body>
</html>
Basically, what we are doing here is - we are making an ajax get request -> /likepost?post_id=<id_of_liked_post>

6. To Register models to admin and add some posts:

  • Open post/admin.py.
  • Import Models to admin.py.
from .models import Post, Like
  • Register your models:
admin.site.register(Post)
admin.site.register(Like)

Now add some posts using django default admin portal. Visit http://localhost:8000/ to view and like posts. I also have added this sample app to my github which you may use for reference.

References:

Happy  Djangoing !!!

This blog is written by Anshul Singhal. If you also wish to showcase your blog here, please see GBlog for guest blog writing on GeeksforGeeks.

 

geeks-digest-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :