i continue my series about using different tools for using ajax with your python projects and in this video i wanted to show how to send basic ajax asynchronous get and post request from a browser using fetch api to a django application when i am clicking on the green button browser sends a get request to my junga app and gets a random number from 1 to 10. when i click on a card browser sends a post request to the django app and gets the float version of the sent numbers and everything is happening without the page reloading so i have here very basic django project it has the only one app digits and only one url pattern that says that all requests to the root address will be handled by the ajax handler class and the ajax handler class just renders to a user the index.html template as a response to his get request in its turn the index template has a button this green button and also there are two empty unordered lists on the page the left and the right lists left and right in the index template i also have attached bootstrap and a css file to add some styles for list item text to load my custom css first of all i added to the settings py file the static files variable and then loaded the static tag into that template okay as the video is about fetch api i'm going to create the main.js file static folder main.js and let's add it to the bottom of the index.html file somewhere before the closing body tag and now let's start with something very simple so i got a button on the page and i want to get the hello world message when i'll click on the button to do it first of all i have to set an on click handler on the button so let's add to the button a special on click attribute and the value of the on click attribute is the function that will be called when the user clicks the button let's say it will be the getnumber function and let's call it and now i have to define the get number function in the main.js file there are several ways to do it and let's do it the following way i'm creating a new variable getsnumber using the const keyword and this getnumber variable gets an anonymous function as an argument this function doesn't accept any arguments and so we can use just round brackets then we have to use an error a special syntax to complete the definition of the function this arrow has no special meaning like a returning value is just a syntax and after the error we have to describe the body of the function i wanted to call console.log function with the hello world message it's only one statement and so we can emit using curly braces and we can see the hello world message our simple function works the next step now let's say that when a user clicks on this green button the browser should send an ejax request to the server to my janga app and change should generate a random number and return it back to the user so let's start with the front and the part and in the body of the get number function i'm going to call the fetch function to make requests to django app so this time i need curly braces i'm defining the response variable and the response variable will be the result of the fetch function but to call it we have to use the await keyboard because the device function is an asynchronous function and accordingly the get's number function should be synchronous tool async or we can use this definition so the first argument of the fetch function is the url to send the request to it'll be a root address the second argument is an object with the other parameters of the request the method key it will be the get get methods get request then the headers it's a dictionary tool and i want to use the x requested with and the content type headers we will get the response from jenga and now let's convert the response to json object we have to wait when the promise that the fetch function returns will be resolved and so let's console log the data variable and now the jungle side here let's import the rend function from the random module and then in the get method of the ajax handler class let's get the random value from 1 to 10. so number will be then i'm going to send into the front end the random number and my response to the client side should be adjacent serializable objects with a certain headers and the easiest way to make such response is to use the json response class so from and let's return the number variable to front end and the gets methods of my view will return an instance of the json response class with the dictionary with the number key and its value is the number variable but if i refresh the page the browser will generate a get request to the root url and instead of my page we will get the number random number and to fix it i have to check whether the request was any jax request or not and django since the third version has no easyjackson method anymore and so we have to check requests headers if request headers i need to get the x requested with header and if its value is equal to xml http request so i want to generate the number and return the json response otherwise i want to render the index template let's test it again we got the page let's click the button and we can see objects with random numbers and now let's append these numbers to the unordered list with the left id so i need the main.js file and to do it first of all i have to get the knotted list with the left id this one and i am going to do it using the get element by id function now let's create a new list item tag and then let's assign to its inner html attribute the value of the number key from the data object which we got from django and finally let's append this list item tag to the ul tag so l left i'm calling the appendchild method and it gets the last item let's test it and we got cards in our noted list the next step is to send a post request by clicking on the cards and the idea is absolutely the same but this time i have to use the post method and create a body of request and in this case it's convenient to separate the making requests functionality into a new function so let's create a new function and let's say it'll be the make request function and it will take url method and body as arguments and now let's move to this function all code regarded with making requests cut and paste it here then instead of the get string in the method key let's assign the method variable this one and above the fetch function call let's define the headers object and let's move the content here and the headers will get the headers variable as the value and also the fetch function should take the body as an argument and finally this function will return the data return that's it and in the get number function let's call the make request function so const data make request and the url will be root address and the method will be get let's test okay nothing changed and uh now i want to get a number from the cards by clicking on it and send this number to janga with an ajax post request and get from a jungle floated version of it let's create a new function it will be get flood number for example and this function will take an event object from the browser as an argument e or event and then to get the number from the last item on which the click occurred i have to use the event object it has the target attribute so let's get the number and i'm using the event object i need its target attribute the target is an element and i need it's in our text and then again we have to make a request to janga let's call the make request function this time the url will be the root address the method will be post and the body parameter will be an object with the number key the value of this number key will be number variable this one and i want to convert the object to a json string with the json stringify method let's wrap it jason stringify the next step django requires to include a csrf token for post requests and the easiest way to get a csrf token is to add a csrf token tag to a template so let's open the index template and somewhere here actually it doesn't matter where exactly somewhere here let's add the csrf token and django will convert this tag into an input tag with the csrf middleware token name so let's get its value i need the make request function and then above the fetch function call and below the headers variable i want to check whether the method is paused or not if the method is posed method i want to get the value of the input tag with the csrf middleweight token name let's get it and this time instead of the get element by id function i want to use the query selector function we got the input tag and let's get its value and after that let's add a new header to the headers object headers new key will be x csrf token and it gets the csrf variable as the value that's it with the csrf protection okay we got a response from django and now let's create a new list item element and assign to its inner text attribute the value we got from the django and then let's add this last item to the ul tag with the right id so first of all i'm going to get the ul tag with the right id then i have to repeat the steps i did in the gets number function so let's create a new list item tag we can just copy this line and then let's assign to its inner text the value we got from jenga so list item inner text or in our html i have to wait when the promise will be resolved and then i need the float key let's say that we will get an object with the float key but it's completely up to you and then let's append this list item tag to the ualright unordered list and the final step i have to do i have to set the event listener on the card on the list item tag in the left ul tag we can do it in the gets number function somewhere here i am calling the addeventlistener method and passing to it the event i want to listen the click event and the second argument is the handler of the event the get float number function as an object i don't call it and that's it and now let's turn back to the jungle side django class based views can have a post methods that accept post requests and so in the post method i have to get the value from the post request as you probably know all parameters of post requests are stored in the request object and it's post dictionary if the form data is provided in my example i don't use a form and it means that the body of the request will be the body attribute of the request object so the data variable will be just request body but i have to deserialize the body of the request to a python dictionary i can do it with the loads function from the json module let's import it the loads function returns a dictionary and i want to get the value of the number key and cast it for the float data type so the float number variable will be float and i need the value of the number key of the data dictionary and the returning value will be a json response object i want to use the float key and the value will be an f string something like you got plot number i used on the float key because in the get float number function i said that the object from django response will have the float key and so let's let's test it header is not defined mean js 39 type of headers dictionary and again okay it's working so if you like this django basically jacks with the fetch api function please leave a like and subscribe to the channel also follow me on telegram and thanks for watching you