POST Requests:

This guide is meant for beginners who have a small amount of experience utilizing HTML, JavaScript, and interacting with web servers such as db.json and understand how GET Requests work.

When creating a POST Request we start with the same format as a GET Request in which we define a URL:

fetch("")

We then need to let that fetch know that it is performing a POST so we have to pass in a second argument for it, making that argument be an Object:

fetch("",{}

We don't close our first parentheses yet, as we want to keep our data open for that second argument.

The Object has to have a method within it so that the fetch knows which HTTP verb to send, because we are storing the method as the standard key:value it looks like this:

fetch("",{
Method: "POST", (this particular value has to be in a string in all caps, we specify this comma to let JavaScript know we're done with this line)
})

Now we need to specify to our request the type of data that it will be sending to our Server. We do this by creating another Object, which is our headers: {}


fetch("",{
Method: "POST",
Headers: {}
})

Using the key:value standard we can then specify the content-type:

fetch("",{
Method: "POST"
Headers: {
'Content-Type': 'application/json'
},
})

We now need a body to send this information across the internet, as you know, we shouldn't just send this as plain JavaScript text because we cant be certain it will be properly parsed and read by the server, the best thing to do in this instance is to send the JavaScript info pre-parsed to our server. We do this by using JSON.stringify and just pass in our function:

fetch("",{
Method: "POST"
Headers: {
'Content-Type': 'application/json'
},
body:JSON.stringify(your function)
})

Our Server takes this requests and processes it. It then places it within our local db.json. After that the Server sends a response back that will include our function and a new id for it as well.

Once this happens we take our response(resp) and parse it once again, this time for our JavaScript to be able to manipulate by using the .json()method. Once that data is parsed we then can rename it as anything for it's element. This helps us to not only specify a non-generic name but helps us to think of what we'll do with our information.

fetch("",{
Method: "POST"
Headers: {
'Content-Type': 'application/json'
},
body:JSON.stringify(your function)
})
.then (resp => resp.json())
.then(your parsed data => (whatever you want to have the result of your parsed data as)
}

Your final result should look somewhat like this, if you chose to take your newly parsed data and pass it through a function:

function newPlayer(newForm) {
fetch("http://localhost:3000/Players", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(newForm),
})
.then((resp) => resp.json())
// .then(player => console.log(player))
.then((player) => showPlayer(player));
}

I often remind myself that not all information needs to be refactored. I currently attend a bootcamp and know how difficult it can be to take in loads of information, and the difficulty of time management to keep from getting overwhelmed. I hope this guide helps you to better understand POST requests and was simple and sweet and thanks for the read!