jQuery Ajax Tutorial #2 - Posting data to backend (jQuery tutorial #8)

Key Takeaways

all right we're on video number two of our jQuery ajax series uh in the last uh video what we did is we covered how to do a get request to grab all of our orders from the server and spit them out so what we have here is an empty UL of orders no liis in it we're on page load we are grabbing all the orders and we're spitting out An Li for each one so that's what's going on here and you see if I inspect this element let's make this a little bigger here you see that I got two liis in here we have populated An Li for Will and An Li for Laura yippe so that's done let's go on and move into the next part which is posting our new drinks say I want to do a drink for John and he just gets a coffee I want to be able to add that I want that to do something I want it to add it to the backend server so it's now per permanently in the database and I also wanted to add it on the page when that's successful let's go ahead let me show you one more thing here on this get request or the jQuery ajax should I say is you can also do error and I can do an erir if this thing does not work I can alert error loading ORD so I have success and I have error if I refresh nothing happens because it was successful uh but let's say I give this a bad URL here two s's on accident alert error loading orders and nothing happened cool so I'll leave that in there and let's go into the next part we want to post new things to the backend so let's look at here from the backend team they said to add an order you send a post request to the same URL API orders except for we're not doing a get request we're doing a post request and which means we're sending information up and here's the sample post data that we are sending we're sending a Json post um and we're sending this information and it will respond kind of like a get request it will also have a response will have the item with an ID now which is if it's successful so we can use that ID to reference it later if we want to update our beverage order so let's go ahead and put that in so we have a button here the ID is ADD order so on click of add order we want to do something we want to make a post let's go ahead and grab our information up top let me cach this Dom every time we add an order we're going to want to look at these two fields and get the value out so I'm going to cash these two Fields up top and I think they're called name Yep they're called name and drink there you go name equals name and drink so on ADD order I'm going to get those two values out of here and then I'm going to post that order so let's go ahead and put together our little posting let's see from the backend team we want to post a simple object of name and drink so let's build that object and name. vow easy enough and then drink drink. valow so that's our order right there we have our name and our drink we're getting the value out of these two fields and we're moving on and then we're going to do Ajax again this type is going to be a post not a get which means we're sending information URL is the same and then we also have a data field since we are passing data in we're going to give it our order right there our order object and a success function and so the order you can actually pass it an existing object or you can actually just kind of create an object on the fly like this if we were to do that that would be the exact same thing we're creating a brand new object it's a little cleaner in my opinion to build the object up there and then so this stays clean um so on success this is our new order that they have given us back um we can do the exact same thing here orders. append New Order and New Order so we are doing is we're posting our new order to the back end we're going to wait for that to be successful if it's successful we are going to add a new Li to our list so it shows up on our page and I'll also add an error and we'll just call this alert error saving order not message there we go let's see if this works so uh oh I have a JavaScript error here let's find out what that's all about unexpected token online 24 yep I did bad syntax those of you guys who are watching the video watching that I cannot type and talk at the same time are probably laughing out loud at me okay so our two drinks are populated in let's add a new one John just likes coffee haha it did it let's go and look at our Network Tab and see what just happened so you notice we did our initial get of orders and then we did a little while later we did a post to the same API and let's look at that real quick you'll notice we posted this information of name John drink coffee and then we got a response of name John drink coffee and an ID of three and so now watch what happens when we refresh our page we've saved it to the back end and now we're getting three drinks so if I had two more drinks Bobby likes water not sure why there we go so now if I refresh now we have all four drinks awesome we have a fully functioning app that talks to the back end and so one thing I do not like that's going on here is I don't really like that we are copying this EXA basically this exact same thing over again so let's go ahead and pull that out we're going to make a function called add order and this will just take an order so let's get rid of this right here cut you out paste you in here order. name so basically whatever we pass it is going to be calling it order so now I just have to go add order and give it my order same thing down here hate that we're doing the exact same thing except for we're going to be passing it the New Order In this case that should work just fine so I refresh it's still populating my initial orders just fine and if I do a new one drink will be latte there we go that's working just fine as well so now what we've done is we have pulled this out to uh a single function here um but if we want to get much more complicated than this it's going to get really messy I really want to start adding more elements in here like a paragraph gra tag and some strong tags but that's just going to be a giant messy string we really want to do this with a templating engine so let's go ahead and add in Hogan JS into our next ah we'll use mustache JS let's go Ahad and add mustache JS into our next video and then we'll add in the delete functionality to wrap up our application