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

all right we're on video number two of our jQuery AJAX series in the last 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 allies in it we're on page load we are grabbing all the orders and we're spitting out in Li for each one so that's what's going on here you see if I inspect this element let's make this a little bigger here you see that I got two allies in here we have populated an Li for will and an Li for Laura Ubaid 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 back-end server so it's now permanently in the database and I also want it 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 error if this thing does not work I can alert error loading order so I have success and I have error if i refresh nothing happens because it was successful but let's say I give this a bad URL here to s is on accident alert error loading orders and nothing happened cool so I'll leave that in there and let's go into next part we want to post new things to the backend so let's look at here from the back-end team they said to add an order you send a post request to the same URL slash API slash orders except 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 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 that order we want to do something we want to make a post let's go ahead and grab our information up top let me cache this Dom every time we add in order we're going to want to look at these two fields and get the value out so I'm going to cache these two fields up top and I think they're called name yep they're called name and drink there you got 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 Val easy enough and then drink drink Val 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 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 so on success this is our new order that they have given us back we can do the exact same thing here orders dot append new order and new order so we're 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 I'll also add an error and we'll just call this alerts error saving order not message there we go let's see if this works so I have a JavaScript error here let's find out that's all about unexpected token on line 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 or probably laughing out loud at me okay so our two drinks are populated in let's out 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'll 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 named John drink coffee and then we got a response of named 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 backend and so one thing I do not like that's going on here is I don't really like that we are copying this exactly 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 nein 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 a single function here 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 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 J s into our next I will use mustache J s let's go ahead and add mustache J s into our next video and then we'll add in the delete functionality to wrap up our application

Channel: LearnCode.academy

Views: 323,934

Keywords: Hypertext Transfer Protocol (Internet Protocol), JQuery (Software), Ajax (Programming Language), JSON (Programming Language), JavaScript (Programming Language), jquery ajax tutorial for beginners, jquery ajax tutorial beginners, jquery ajax tutorial, jquery ajax, jquery, jquery ajax json, jquery post request, jquery ajax post, javascript ajax, javascript ajax tutorial, javascript ajax tutorial beginners, xhr, jquery xhr, jquery xhr tutorial

Id: 5nL7X1UMWsc

Length: 7min 51sec (471 seconds)

Published: Thu Jun 19 2014

Reddit Comments

[u/ponytoaster]

Not bad but for some sections you are kind of re-inventing the wheel where something like Knockout templates could be used. But good for learning how certain aspects of JQ work!