Handling AJAX in Django

Hello guys. Welcome to LearnVern.

In the last topic we saw Javascript validation on HTML form, with the help of which we had done some validations on the form.

Right?

Clear?

Now our today’s topic is AJAX.

I’m going to show you all about what can be done with the help of AJAX, how AJAX works, right, with the practical, with the theoretical, I’ll explain everything to you.

Right?

So let me start with what AJAX means.

AJAX stands for Asynchronous Javascript and XML.

Means it is a language which is used for fast & interactive response in which your data gets transferred into the database without refreshing the page & comes from the database also, without any refresh.

Until now we must have seen when we click on the submit button of the form, it gets refreshed & then the data goes into the database.

But here, by using AJAX, without any refresh, you can send your data into the database and bring it back from the database too.

Okay? Right?

So AJAX means this.

Now why should we use AJAX?

I will tell you that as well.

So AJAX means to update a webpage without reloading the pages.

Means like I said, your page gets automatically updated without refreshing your page.

Which means that your page without any refresh, your page without getting refreshed, it will get reloaded here.

Then, request data from the server after the page has loaded.

Which means that until your page has not loaded, it won’t send a request on your server.

Okay?

And our third point says the same thing, that until your page has not been loaded, it won’t even fetch, that is receive the data.

Okay?

And send data to the server in the background.

Means your AJAX sends data in the background also.

It doesn’t show any process in the front end.

If any of your page doesn’t reload, any functionality is not performed but all of that is happening in the background.

Right?

I have explained it in the diagram below - Client, AJAX, Django View.

So this is how this process works in the background.

Right?

Clear?

I’ll show you an example of AJAX here through which you will get a new idea about how we have to work.

Right?

Alright? Okay.

So we have to make a whole new project.

First of all, we will make a Virtual Environment here, right?

Clear?

So how do we have to make it?

-m venv myvenv, right

We created our Virtual Environment here.

Then we will activate the Virtual Environment.

Okay? And then we will install Django.

Django is getting installed right now.

After Django gets installed, we will make Django project

Okay?

Then we will make an App here okay?

And then after the App , we will open our code here.

Okay?

And then we will migrate as well because I am not using MySQL, right?

So I’m directly migrating here.

Okay so we migrated it as well.

Now we will do all the settings that we have to do by going into VS code.

Such as we have to install app here, right?

We have to go to urls and include here.

And we have to give our app’s path here.

I have already told you all of these things in the previous videos also.

Right?

Those of you who don’t know how this works & if any of you want to do it by connecting MySQL also, it is also possible.

All you have to do is, you have to go to settings.py & include MySQL setting.

Now you have to make a new file which is urls.py & copy this portion, copy this much from project’s urls, and paste it here, right?

So our whole process is ready.

Now what do you have to do?

It’s very simple.

First of all, we have to make our models.

Right?

What do we have to do? We have to make our models only.

Okay so I have defined these models here, right?

Here if your Python’s version is String, means if the Python’s version is 3, then you can use another function also, which is _ _ str _ _

And we can return it directly here, so you don’t need to add the brackets as well.

Right?

Clear?

Okay.

Now what you have to do is, we have made our models here.

So we have made customized models here.

We already know which will be the next step after this.

It will be the ‘Make Migration’ Step.

So we will write ‘make migration’ here.

Okay?

Now what is it here?

It will give you an error when you use a foreign key.

So what you have to do is, you have to compulsorily write ‘on delete = models.cascade.

Otherwise it won’t let you migrate.

Just as you write, your models will be made.

And then we will migrate.

And it migrated as well.

Okay? Right? Understood this much?

What did we do?

We made 2 models in which 1 was a post model and another was Like named Model.

In which there are 2 fields, one is post heading, one is Post Tax.

And this function, this function will display only the heading name.

I have used this before also when we worked with Django Admin Panel, we used it in that video as well.

Those of you don’t know, kindly see that video first & then continue with this video.

Okay?

Okay.

So now what do we have to do first of all?

We will go to Views & then Import Models first of all…

Which is import * right?

And we will import one more thing which is, from Django.http import HTTP Response.

Okay?

Why this?

Because we have to generate response, we imported this too.

Now first & foremost, we have to generate a View.

So to make a View, we will use Function.

And we will write here Index View.

Okay?

Why Index View?

Because what my post is, which we will create through Admin Panel, all the posts which we will add through Admin Panel, should get shown on the Index Panel.

Right?

Clear?

How will we do it?

Here first of all what you have to do is, we will take a variable Post.

We will use the model named Post & then fire a query in it which is Post.objects.all.

What will this query do?

However many posts you have in your database which we will add through the Admin Panel, it will get all those posts and then what will we do?

We will return render it.

Where?

On our index page which we haven’t made yet.

How will we render it? We all already know about it.

We will send it to the Dictionary.

I will use Post as a key’s name & data is also in the variable so we are sending that.

Okay?

Right?

Understood?

Now what do we have to do?

We have to make 1 more view.

What do we have to do?

We have to make 1 more view, with the help of which however many posts have been liked, we will save it.

Means we will save the likes that will come on the post in our database.

How will we do it?

It’s not much, it is simple.

How will we do it?

It will happen in a simple manner.

First of all, we will make a method which will like a post and here, we will take a request.

Okay?

Now here, first of all, what do we have to check?

From which method is the request coming?

We will use the get method by default, right?

How will we check it?

If request.method is == get.

If it is the Get method, then only we will accept otherwise we won’t.

Now I want a particular post ID, I want the ID of the post which has been liked.

Why do I want it?

Otherwise how will I know which posts have got the likes?

That is why first of all, we will get the ID of the post.

How will we do it?

I will take the post_ID variable.

And take request.get and in that I will take post_ID.

Okay?

First of all I’m telling you the backend. Why?

Because it is necessary for you to understand beforehand how we are going to process it.

Right?

And then here I took a variable likedpost, right?

Clear?

Then what are we going to do?

Post. 

We will Get the post which has been liked.

How will you do it?

Post.objects.get.

Then we will pass our primary key that is pk = post _ID.

Why?

You are getting your post ID here, right?

What is this?

I will write here for you.

Post ID.

Okay?

And here I’ll write getting post which are like.

Okay? Right?

I wrote a comment here through which you will know in an easier manner.

Now what do I want to do?

I want to save my data in our model.

I want to save the liked posts.

How will we do it?

Suppose I took a variable named L.

Okay?

And we used our like model.

And in that, I used Post which is our foreign key, through whose name we made a foreign key, we used it.

Right?

And now what will we do?

We will get the post which we received.

Where did we get the Like post?

In the LikePost variable.

Okay?

So what are we doing here?

We are creating a Like Object.

Means we are creating Like Object.

Right?

And all the things have been stored in L.

So now we will save it in the database with the help of L.

How will we save it?

We will use the L.save method.

Right?

What does it do?

Saving it to store in database.

Means what are we doing with the help of save?

We are saving it in the database & what do we have to do now?

We have to send a response.

If it is saved then we will send a response with the help of http response.

And I will write here Success.

I will write success like this.

Otherwise in else, what will I do?

Return http response.

And here I’ll write that the request method is not GET.

That means that the request method that we did is not GET.

Right?

So we have made two views here.

Clear?

In which 1 view is showing all the posts & the other view will save the liked posts.

Okay?

Now what will we do?

We will make a URL.

So for that we’ll go in App, in the App's URL.

First of all, we will import Views.

Okay?

Now what will we do here?

We will make URLs.

So which urls do we have to make?

The first url will be for our index, so we will leave it blank only.

Why?

Because first & foremost, all the posts must be seen so that it gets called by default.

Okay?

And we’ll put a name here, Index & our second url will be for Liked Post.

So here I’ll give the name Like Post.

And Views.likepost.

Also I’ll give it the same name to avoid confusion, likepost.

Okay? Right?

So what happened here was we made two urls of the views.

Now we will make our html page also.

How will you make an html page?

First of all, we have to make a new folder which is templates, and in that templates folder, we’ll again make a folder which is App.

And in that, we will make index.html.

Okay? Right?

So what happened here was, we made a new page index.html and we have to show all the posts on this particular index page which you will add from your Admin Panel.

Okay? Right?

So what I did here was, I have taken a template here, okay.

And I have fired a for loop here for the post that I’m going to show here.

Right?

And in that I have kept a counter as well, forloop.counter so that we get to how many counts are happening.

Means with the help of the particular .counter that which posts have come after counting.

We will get the post counts, we will get the post text here & the post heading here.

Right?

And below I have kept a like button which is a simple urls process type.

In that, I sent a post.ID.

What does post.ID mean?

With the help of which we will get an ID here in our view.

Okay? Right?

I hope you all are understanding so far.

About how you will get your post ID.

Now here, what we have to do is, we have to write an Ajax script.

What do we have to do?

We have to write an Ajax script.

So how will you write an Ajax script?

Ajax script is simply written in script tag.

Let’s see how we have to write.

Here, you will take a script tag.

What will you take?

Script tag.

And in this script tag, what will you do first of all?

You will give a type which will be text or else javascript type.

Okay?

Right?

Why? Because this particular script Ajax, is written under Javascript only.

Now in Ajax, the class that is Like button, the class of like button, we want to call this Ajax by clicking on it.

How will you write it?

You have to use the $ sign first.

Then then single inverted comma, and if you want to use the class, then it is compulsory to write dot.

Because you are able to access the particular class through dot only.

And here you have to write the name of our class which is like button.

So you will write like button which is your class name.

Okay?

And on its click, we want to call this function.

So we have made this function.

Okay?

And we have opened a { here.

Right?

So what happened?

Just as the class will be clicked, it means the class’ button, this like button which is the ID, as the class name will be clicked, this function will get called.

And then we have to take a variable here, like I had taught you to take a variable in the previous video through var keyword, with the help of that only, we will take a catID in a way.

Right?

Now here, catID =, now what do I have to do?

That whatever my data is, okay, look here, I have taken data cat ID.

I want to access the variable with its help.

Why do I need to access the variable?

Because inside this variable, there is a post ID.

Right?

I want to access the attribute.

How will I do it?

You have to take a $ sign and then in the bracket, write This.

Why did we write This?

Because in this particular page, right, .attribute, because we have to access that particular attribute that is why we wrote attribute.

In double inverted commas, data - catID.

You will pass your attribute’s name here.

And then ; right?

Clear?

Hope you understood so far.

And then now what will you do?

We will take $ sign & .ajax.

Now we will write Ajax’s script.

How will we write?

It’s very simple.

Right?

First of all, we will On our curly brackets.

Right?

Now with whose help do we have to send the request?

With the GET method.

So we will use Type here.

And what will we write its =?

We will take GET.

Why will we take GET?

Because our request should go only through the GET method otherwise it won’t accept the request.

Right?

And then we have to pass a url, which is the like post url, which means you have to pass this View’s url, which further means you have to pass this name.

Okay?

So how will you pass it?

We will pass it normally.

Likepost.

In this way.

Okay?

Likepost, then comma, right?

And then we have to send the data in there.

Right?

So how will you send the data?

You have to send the post ID.

Okay, so how will you send it?

post_ID : catID.

Our post ID has been stored in cat.

So you sent it here.

Okay?

And then you will add a comma here.

Right?

And success.

If it is successful, then we will call a new function, anonymous function & in that we will pass this data.

Data means you will pass here the data that arrived from that place.

Right?

And for this function, you will open a new curly bracket and in that, # means you have to select an ID.

Means whichever particular ID you will get, the like ID that you are getting, means if it is liked, we will remove it.

Right?

And whatever the message is, it will be printed.

We have to get our message printed as well, the response that we will get from there.

Right?

So how will we do it?

Single inverted commas #

# means we have to access the IDs.

And then like, okay.

Then + catID.

You have to pass this here.

Means the variable we took.

And then, you have to use a remove method, it’s a predefined method, and we have to print the message also.

So for message as well, we will make an ID, this is the one, the ID named message.

How will we access it?

Through Hash. right? So, message. Right?

.text.

Text means whichever data we sent from there, the success one, we have to show it here.

How will we show it? We will show it in data.

Okay? Right?

So our Ajax Script is ready.

So you prepared the Ajax Script, okay?

With the help of which you will know how many likes are there & whether you are getting a particular response or not.

Now what do we have to do?

We have to register our models in admin.py.

So we will import our models first of all & then admin.site.register and post.

What was the second one? Admin.site.register, ours was the like post one.

Our model is named Like, right?

We registered both of our models.

Now what do we have to do?

We have to make a Login of our Admin Panel, meaning a user.

How will we make it?

Python manage.py create super user.

Then we will leave this blank only. Why? Because we have to use Admin only.

We don’t have to use an Email Address.

I gave a password.

We will create a password too.

So our superuser is created.

And now we will runserver, and then we will go onto our browser.

Let’s go to our browse & our link. There is nothing right now.

See, the like post app is here, that means that the page has run.

Now we have to add a post here.

So we will write admin & enter our password.

Right? Clear?

Now we will add a post here, suppose I added a post 1.

This is my post 1. Okay?

Then save & add another.

I’ll add 2 posts. Post 2.

This is my post 2. Okay.

I added these 2 posts.

I’ll go here & link the 127 here & I got the 2 posts. Right?

Now what do I have to do?

By clicking on Like, our Ajax script should be called & also saved in our database.

Okay?

So we will check it once.

Let’s check it.

What do we have to check? That just as we click on Like, that Like button should get removed & in return we should get the response of success.

See, just as I click on Like, it got liked & here it is showing success.

Our page didn’t even refresh & our like button went away.

In the same manner, I liked it here & success is shown here.

 Okay?

Now we will refresh it to check & see, like object is also created.

So this is how Ajax works without any refreshment, that is that our page won’t even reload and our response goes away & gets received as well.

Right? Clear?

Understood how this works?

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

When we meet next, our next topic will be where we will start our Django Project.

Which means that we are going with the final step of Django.

We will now start the Django Project with the database wherein I’ll make a whole Django Project to show you.

Okay guys, so see you in the next video.