2.3 POST, PUT, and DELETE Requests

In the previous lesson we finished our search form which allowed us to fill out the form. And through JavaScript we read those values, submitted them to the server using a get request, and then we anticipated the response. In this lesson, we are still going to be working with forms, but we are going to make a post request. A post request is typically for creating something on the server. So once again, we're going to read the values entered into the form, submit those to the server, and then we will create the new guitar in our data store. Now, it's important to note that the changes that we make aren't really being saved, they are in memory. So whenever we stop the application and then run it again, then all of our changes are going to be lost. And we're going to do this in two different ways. We will first focus on JSON, because we can submit JSON in a post request to the server. And then we will use just a normal form approach, but of course we will still do everything else through JavaScript. So let's start by taking the code from our search form, and use that as a basis, because we still need to read the form and we have the code for doing that. But of course, our code for issuing the request is going to change. So let's first of all get rid of all of the code inside of the then callback method and then let's change everything else. So we aren't going to make a get request, we will make a post request. We are still going to issue that request to the same endpoint. But that the data that we send is going to be different. Instead of an object that has a params property, we are going to be sending just the object that we build. And that is currently called queryObj which we should probably change because this isn't a query. So let's just call it guitar, and we will change all of those references there, and that's it. So we're done now. We do need to do something whenever we get a response back from the server. And in this case, the server is going to send us back the guitar that we just created, but it's going to have an id property populated so that we can work with that however we need to. So in this case, let's just alert that information, so we will say, guitar created with ID, and then we will include that ID. So the response is going to be in JSON, so that we can then just go ahead and say response.data.id because Axios is going to convert that into a JavaScript object that we can then use. There we go. This should work, so let's go to the browser, let's refresh the page that we have here. And let's see, I don't have a telecaster, I would really like a telecaster, so let's just go ahead and add one telecaster that's manufactured by Fender. I really don't care about the year, so let's use this year 2018. The neck is Maple the Fingerboard is Maple. There are some with Rosewood, but Maple is good for me and those are 22 frets. So whenever we submit this, we should see Guitar created with an ID of 5. And if we wanted to really check to see if that really was created. Let's go and just look at the index, there you go we had the four guitars that were there before and now we have the fifth. Telecaster, the one that we created, so that's good. We submitted that as JSON. And in fact, if you wanted to see that being done, there's a couple of ways that you can go about it. You can use the request, or the Network Tools inside of Chrome. So let's call this name Telecaster Two. Actually, no, let's do something else, I want an Explorer. I love the shape of the Explore, so that's made by Gibson. The year, once again, I really don't care about the year. The neck would be Mahogany, in this case, unless if they use some other type of wood which I doubt they would. The Fingerboard is probably Rosewood might be ebony. And the amount of frets, I don't know, it's either 22 or 24, let's go with 24. And then we will submit, and we can see that there was a request being made. And we can inspect here, if we scroll down we get the response headers first, but we want to look at the request headers. And we can see that we sent the data as JSON and if we scroll on down we should see the data that was sent, there it is. There is the request payload and that was sent in JSON format. So with that out of the way, we want to do the same thing but as a normal form. But we are still going to submit everything through JavaScript and things like that. This is in case if you don't want to submit it as JSON, but you want to submit it as a URL encoded string. So let's copy this file and let's call it create-form. I guess the more correct thing would be to call it, x-www-url encoded but that's a little bit too long if you ask me. And for the most part we are going to leave everything the same, except that we need to change the object that we build. Because if we pass and object, just a normal JavaScript object to the Axios post method it is still going to convert that into JSON, even if we specify the headers. Now, we don't need to actually do this, but I'm going to show you how to do this. There is a third argument that we can pass to our method here. And it would be an object that contains a variety of options that we can include for this request like for example, headers. If we wanted to set a specific header we could do that. So headers is an object and then we would define the header that we would want. So in this case we could say content-type and then the value would be x-www.url-encoded. That's not everything, there's an application somewhere in there, but that's the general idea. You can include your custom headers if you want to. If your API or whatever it is that you're making a request for expects some other custom type of header you can include that here. Now we're not looking for any of that type of stuff but I'm going to leave this here because it's nice to have that information. And we'll just set header value here. So, even if we set the content-type to the appropriate header, it is still going to convert the object into JSON. And so the server application isn't going to understand anything at all about that. So instead what we need to do is create a special type of object called URLSearchParams. Now this is pretty new to browsers and of course, most and probably all modern browsers do support it. I do know that IE 11 does not support URLSearchParams, but there are polyfills available. But the idea is that this creates an object and then we append values both the name and the value, and then we use that as the data that we post to the server. So it's a little bit different, but it's very important to understand the difference, otherwise Axios is not going to do what you expect that it's going to do. And you would have several minutes of extreme frustration because I'm speaking from experience there. So there is this method called append, and it accepts two values. The first is the name of the field, the second is the value of that field. So basically this is going to turn our data into a string that would be name = value &, name2 = value. So it looks a lot like a query string, because if you actually look at the request body from just a normal form submission for a post request that's actually the data that gets sent. So, this is going to give us the same thing, but the key thing is that we have to create this URLSearchParams object. So with that in place, we should be able to go to create-form.html and let's pick another guitar. I do have a Jazzmaster, that's made by fender. The year I don't remember what it was, 2015? I think maybe, the neck is maple, the Fingerboard is Rosewood. It has 22 jumbo frets and that is something that I haven't quite gotten used to. But we can see that our guitar was created with an ID of 7. Now let's look at the data, because we did look at the data for the JSON version, we will look at the data here. So let's just change the names so that we know that we have something different, let's send this and then let's inspect. So, blabbity, blah, blah, blah, let's get down to the request headers. And let's pull that up, can we pull that up? No, we can't, okay. Okay, so let's see here content-type: application/x- blah, blah, blah, blah, blah. That is what is sent with a normal post request with a form. So if we scroll on down to look at the payload we will see that it is no longer a JSON structure. If we look at the source, which I did not know that was there, but we can see that it has been encoded into the data that the server is expecting. And once again, if we look at our list we are going to see those new additions. Now there's one other thing that I want to talk about before we move on to the next lesson, and that is there are many different types of HTTP requests. We've talked about get, we've talked about post, but there's also put, and delete. And these serve different purposes. A put request is primarily for editing a resource. A delete request is for you guessed it, deleting a resource. And they have different methods as well, so if we wanted to issue a put request, we would use the put method. If we wanted to issue a delete request, we would use the delete method. But here's the thing, everything that we talked about with a post request applies to put and delete. So we would supply the URL, we would supply the object that we wanted to send with that request, and then any headers that we might need, and then we send that request. So, if it's going to be a JSON payload, you just pass in the plain ordinary JavaScript object, so that Axios will stringify that. If it is a URL encoded payload, then you would use the URLSearchParams object to build your data and then send that. So they are different methods, they are used for different purposes, but as far as how you use them are the same.