How To Send Json Object In Post Request In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of how to send json object in post request in JavaScript, here we needs to use async function because we need to generate post request with json object data.
This type of functions makes it easier to write promises and always returns promises then async function had await method will waits until resolves it promises.
The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style.
Step By Step Guide On How To Send Json Object In Post Request In JavaScript :-
Here in script we defined json object variable ‘jobj’ with datas ‘name: "Adam", age: 22, city: "Dubai"’ initialized then variables ‘url, header’ defined for store respective ‘https://httpbin.org/post, application/json’ values.
In function pofun() defined with ‘async’ keyword then here we are passing ‘url, ,requestType,header’ variables as a parameters.
Here we using await fetch method for access json object ‘jobj’ by stringify() method and then() method will generate promises and printing fetched result on console.
<!DOCTYPE html>
<html>
<head>
<title>SEND JSON OBJECT IN POST REQUEST</title>
</head>
<body>
<script>
let jobj={
name: "Adam",
age: 22,
city: "Dubai"
};
let url="https://httpbin.org/post";
let header={
'Accept': 'application/json',
'Content-Type': 'application/json'
};
async function pofun(url,requestType,header){
await fetch(
url,
{
method: requestType,
headers: header,
body: JSON.stringify(jobj)
},
).then(async rawResponse =>{
var content=await rawResponse.json()
console.log(content);
});
}
pofun(url,"POST",header);
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script variables ‘jobj,url,header’ defined for store respective values/datas ‘name: "Adam", age: 22, city: "Dubai", https://httpbin.org/post, application/json’.
- Those values are defined for request send json object in post method. We defined async pofun() function with parameters as above seen variables.
- We know async method will always had await which is wait until promise get resolves. Here we using await with fetch method there we converting json object as string and take it as body of message.
- Promises will had then() method there we waiting for return of resolved promises then printed promises of json object data on console and at last we declared function call pofun() method with ‘POST’ as request type.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to send json object in post request using javascript.
When we executes program on browser we can’t see anything because we printed result on console.
For that we need to use shortcut ‘ctrl+shift+j’ then console panel will open with result message of defined json object data’s.
Confirm one thing that is we need to run program on xampp server so before loadsprogram on browser we need to run server otherwise we gets error.
I hope this tutorial on how to send json object in post request in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
