In this video we are going to learn how can we insert data in server using fetch API?
For that we need to provide server side file path, maybe php file, python file or dotnet file.
With that we pass some parameter.
So I use comma and I use curly braces.
And inside the curly braces we use some properties and they have some different values.
Our first property is method.
As I told you earlier, we have different method to retrieve data and send data.
And if you want to insert data then we need to use post method.
But for Json we have some more method.
When we need to insert data to our server, we need to use post method.
But if you want to update server data then you need to use put.
And if I want to delete server data then we need to use delete method.
And you just want to read data.
Then you need to use get method.
And then come our second property which is body.
Inside the body we pass those data which we have to insert in our server.
And it can be different maybe from data Json data or text data.
And then we need to pass our header.
We need to declare the format.
However we want to send data to the server through the body.
I just want to say content type.
For this we need to type a keyword content type.
And then we need to type application slash data format in our case Json.
It's mean whatever data we send from our body, it's a Json formatted data.
Suppose we don't want to send Json data.
I want to send is HTML from data.
In that case we need to use different content type application slash x hyphen W-w-w hyphen from hyphen
URL encoded.
If you want to send from data directly, then you need to use this method.
So let me show you the practical.
And now I'm going to insert data to our server using fetch API.
And you know we don't have any real database.
So I'm going to use fake Json data.
So I'm going to use our old website named Json placeholder.
And if I scroll down a little bit, you can see you can see a link named guide.
Inside this link you can get the code that you can use to send data to server using fetch API.
If you want to read data then you need to use this code.
And if I scroll down a little bit, you can see an option creating a resource.
So using this code we can insert data in our live server through fetch API.
And you can see the header content type method post.
And you can see another function named Json.stringify.
What is the meaning of it?
However data we get from our user, it's a JavaScript object and we cannot save JavaScript object directly
to Json file.
So we use the function named Json.stringify.
It converts the JavaScript object into a Json data, and we already know if we try to send Json data,
then we need to declare our content type application Json.
So I'm going to use this whole code.
So I select and copy it and insert the script tag I'm going to override the code.
So using this file I'm going to insert new data to our server.
And you can see our server path in our URL section.
And if I save the file and back to the page and you can see in my console it returned the data what
we insert in our server.
You can see ID 101, title F00 and user ID one.
This is the response from our server.
It's a dummy data so it's not going to save permanently.
But this is the exact method we should follow when we try to insert data in server using fetch API.
It's a fake data.
If I change the title Hello World and save the code, you can see an error in our console.
It is not 404.
This website provides a demo file so we cannot add different data to their server.
We can use this website link for practice purpose.
But if we use our own PHP code or any other server side language, then we can save the data in that
server.
Not only that, you can create the object outside the body tag.
Let me show you.
So I'm going to copy the object content.
And outside the fetch API I'm going to create a variable.
VAR obj obj equal to a.
Create a JavaScript object using same key and value and inside the body section I'm going to convert
this JavaScript object into a Json data.
So json dot stringify inside the round braces obj.
And if I save this file you can see the response in our console.
So I hope now it's clear for you what is fetch method and how we can use.
And if I back to the Json placeholder guide you can see updating resource method.
Just you need to change your method name put and you need to follow the similar step.
That's it.
And for delete data just you need to use delete method.
And in your URL you need to provide the exact index number.
You can see post slash one.
I hope you enjoyed this video.
Thanks for watching this video.
See you on the next tutorial!