Create a Django API in These 5 Steps

Update webpage elements without refreshing

Maybe you want to make changes to database and also reflect that back on the webpage for a user on a click of a button; without reloading, sort of like an app, right? Well what you are looking for is AJAX (Asynchronous JavaScript And XML).

Basically we are going to do two things:

Because the way how JSON is represented in JavaScript, is similar to how Python data Structure “Dictionary” is created; so it gets a little easier when writing an API.

Let’s get started.

I’ll go along with an example. Let’s say a user wants to add an item to Wish List. Now we need to know two things:

For now Action will be add.

We will keep the the product ID and action in our HTML and associate it with particular button using custom data attribute, in our case data-product and data-action in our template.

Also add a class so that we can look up for this button in JavaScript. I used update-wishlist.

Using JavaScript.

Remember we added a class update-wishlist to our button. We can use getElementsByClassName or querySelectorAll function to add an event listener to our buttons.

Now, as soon as the page is loaded, the script runs, and adds the event Listener to all of our buttons with class update-wishlist.

Yeah, This is where we are going to call our API and get some data.

Method (on line no. 5) provides information for the request you’re making from API. It can either of these, depending on the use case.

But Remember each method specify a specific operation which could only be performed on the database. If the API doesn’t accept the method which you have specified, you’ll get an error like this in console.

Headers (on line no. 6) represents response/request headers, allowing you to query them and take different actions depending on the results.

Body (on line no. 7) represents the response to a request.

This fetch method returns a promise containing the response (a Response object). Currently, we will send the product ID and Action.

The response then has to be read as JSON, and pass it to another function updateNavbar where we will update the navbar. Replace it with your own function which will update DOM elements.

Add the file to the end of your index.html along with other JavaScript file.

Now we need to process our data, but first we need to setup few things. Open up your Project in your favourite IDE/text editor and follow along.

From your project root run a terminal and write this command to install pip package

We first need to create a new app, I’ll name it serverapi . So we will run a command again in the terminal.

Along with your other apps, add your server API app in this way,

appname.apps.AppnameConfig

In your main urls.py file add the path to your URL file of your newly created app along with other URLs.

And, now we will add a path to view function in your newly created app.

Now, that we have everything setup, we can now write our views.

Now, just like normal views we go ahead to process the database based on what was the action, once done we return a JsonResponse which can then be received in our JavaScript.

Remember we passed the Response to updateNavbar in Step 2. You can use the passed data as you may wish. For now I will be updating the navbar.

So, either add below lines directly inside your index.html or create a new .js file and add it inside your head tag.

Related posts:

The Angel round is for those who like to commit on the basis of the reputation/motivations of the creator, a design intention and a product concept. They also want to be involved in the process of…

Companies love numbers. They love to boast about their numbers and are constantly developing ways to measure even the most mundane things ranging from daily employee coffee intake to smoke breaks…

After months of constant downward price action, many well-respected cryptocurrency analysts are taking to Twitter and social media to say why they believe the bear market is officially over. Willy…