jQuery Crash Course [5] - Ajax

alright so in this video we're going to work with Ajax and jQuery now before we get started there's a couple things that I need you to do if you're going to follow along one is to install nodejs which is a JavaScript runtime basically you can run JavaScript on server environment so you need to get that installed and then also there's an NPM module called live server NPM is node packaged modules so basically when you install node you also get NPM and you can install different modules such as this one and this is a server that is very very simple it's just a dev server you run a command in your command line and it'll open your file as I open it inside of a server alright or in a server environment and the reason we're doing this is because if we try to do ajax from just a standard file on the file system we're going to get some issues with chrome so just get that installed if you don't have it just go to node.js org go and download it install it it's just a standard Windows installer if you're on Mac or Linux follow the directions for those platforms as well once you get that set up I'm just going to open up a command line real quick ok once you get that set up you should be able to say node B and that will give you your version and NPM V and that'll also verify that you have both of those alright so now to get live server setup all you're going to have to do is say NPM install live server and you want to add - G that's going to make it global so that you can access it from anywhere you can run your server from anywhere so just go ahead and do that and if you have something like zamp or xampp or one of those within where you have an apache server you can also use that as well you just have to have some kind of server environment alright so that's set up now what we want to do is navigate to our file here which I have in Ajax folder called Ajax so I'm going to say CD oops dot dot and it's on my desktop so I want to go to users Brad slash desktop slash jQuery crash course not specify let's see CD users Brad up I spelled desktop wrong okay and then I want to go into the Ajax folder and then what we're going to do is run live server now if if you if your port 8080 isn't taken which it probably isn't then you can just go ahead and run live server mine is so I'm going to specify a certain port I'm gonna say port 8000 alright and that will just load up that index.html file in the server you can see we're at one two seven zero zero one 8000 all right so just want to get that out of the way before we start so let's open up our index file here which is just the UI that we've been using and let's get started alright so Ajax stands for asynchronous JavaScript and XML and you probably already know that what it does is it allows you to do things like make requests behind the scenes so that you don't have to refresh the page you can just update certain parts of your application alright and you can use this to get other HTML pages you can fetch Jason so that you can work with api's and you can get data and load it and do all kinds of stuff make post requests so what I'm going to do here is in the container I'm going to put a div with an ID of result and then I'm going to create another file in this folder so let's see we're going to create a new file and let's call it test dot HTML all right and then we'll open that up and I'm just going to put an h1 here and we'll just say hello from test save that and then what I want to do is bring in the content from that file using a jack now there's a bunch of different methods we can use I think the easiest is load ok it's the easiest but you also have some limitations now let's go down here and we're going to say I'm going to grab that result div and we're going to call dot load and then in here we're going to pass in the file that we want to load so this is going to be test dot HTML and it's in the same directory so we don't need any folder structure or anything like that so let's go ahead and save it and over here it should reload by itself and there you go hello from tests so we're bringing the the content from this file into this one using Ajax ok none of the other parts of the page are reloading now there's some stuff we can add to this load method if say we want to check the response or we want to we want it to do something if there's an error so we can do that with a callback function if we go like that and that can take in a couple things will say response text status text and then our xhr object alright and then in here we'll do an if ok we'll check to see if everything went all right we'll say if status text is equal to success that means everything went ok so then we'll do an alert we'll say it went fine and then let's do another if actually we'll do let's do an else if we'll say else if status text equals error then we'll say alert we'll say error and then we can also put in this the status so we'll concatenate that xhr dot status and we can also get the status actually we'll just do status text like that alright so if we save that and reload it went fine and then it go it goes and adds that content now what if we don't have a file called or what if we search for a file called test one that we know isn't there let's go ahead and save that and reload and now we get error not found all right so that's how that works just going to change that back and let's go ahead and comment this out all right so that's the load method we also have a get that we can use so it's money sign dot get and in here we can pass in test dot HTML and then it's going to take a function ok that function will pass back data and then we can do what we want with that data let's put it in result will say result dot HTML and we'll pass in data all right so let's save that and it reloads and we get the data ok so it works just like we did with it's just a different way of doing it now let's say we want to get Jason content so what I'm going to do is create in here a new file and I'm going to call it users dot Jason all right and we'll open that up I'm just going to paste this in it's just an array of objects Jason objects just some users and we'll save that they each have a first name last name and email so let's go back to our script and now we want to do is we want to use instead of get we're going to use get Jason so I'm going to comment that out all right and let's say dot get Jason and here we'll put in the name of the file which is users Jason and then we have our function ok passing the data and then what we'll do is loop through we'll do an each pass in the data we're getting back and then a function pass in the index and Val actually instead of valid say user be a little bit more descriptive and then we'll put up here a ul with the ID of users okay and then down here we'll take that so UL ID users and we want to dot append pass in here allies and in here we'll put user dot first-name save that let it reload and looks like unexpected identifier hmm oh I don't have a comma right here I got to separate those there we go so now the users are being pulled in and put in as list items okay so that can be really helpful now right now we're working with a local file but we can also we can also use third-party AP is now there's one I forget exactly the URL right here Jason placeholder dot type eco comm and this basically gives us free api's to work with for instance posts you can see it gives us all these different posts with a title and a body so let's let's do that now we could use get Jason but I'm now going to show you the Ajax method okay and these all do the same basic thing really all right I think the Ajax is the most flexibility of the most options and so on alright so let's say money sign dot Ajax and in here we're going to put an object first thing is going to be the method so this could be post or get if you don't provide a method I believe the default is get and then we need the URL and we'll grab this right here okay and then we're going to say the data type which in this case is Jason and then down here we're going to say dot done and inside that done we'll have a function that's going to pass back data okay now in this done call back function let's do console dot log data okay we'll go back reload and now if you look down here we have a whole bunch of objects and they have title body ID and use your ID so it's pulling all of this into our application now if we want to put this in our browser in our application UI like we can use let's let's use the map instead of each I don't think I showed you that okay works very similar I'm going to say dollar sign dot map whoops and then we're going to pass in here data the data that came back and we'll say function ok we'll pass in here post call it whatever you want but I'm going to be descriptive and then we'll take our result and we'll say dot pen and let's append an h3 that'll have the title so we'll just put that in there post dot title and then after the h3 let's put a paragraph and we're going to concatenate in there post dot blog all right so let's save that and there we go we have all of our posts all the title and the body now the last thing I want to show you is make is how we can make a post request alright so what we're going to do is let's first of all comment it so and then we're going to create a form up here okay the form and then we're going to have input type text and we'll give it an ID of title and a placeholder of title and then let's do a text area placeholder body and let's give it an ID of body all right and then we'll just put h3 will say add post all right let's give this form an idea as well I'll call it post form all right and let's also put an action in so usually if you're using PHP or something and you're directly submitting a form you want to put an action with JavaScript we're going to put our URL in here but we're going to grab it from within our script and then call the post request so the the URL I want is this same one okay we're going to make a post request to this just like that and then let's go down let's check it out first okay so we have our well we need a submit button and that's really ugly so I'm just going to put a line break there and there and then let's put our input so submit value submit and there we go okay so now what we're going to do is grab that form so it had an idea of post form and then we'll say dot submit okay put our function and we're going to pass in that evaluative nth the default behavior prevent default and let's see we want to grab the the title and the body values so let's save our title and we're going to set it to ID title dot Val okay same thing with the body body dot Val okay and then the URL let's grab that as well remember that's in the action attribute so what we can do is we can say this because we're talking about the actual form and then we want the attribute of action alright then what we're going to do is we're going to use the post function just like we have get we have dot post all right and then here we're going to pass in the URL and then the values we want to send along which will be titled okay send them as an object like that and then we're going to say dot done and that takes in a function okay now it is going to give us the data back as well and then what we'll do is just console dot log I'll say post saved console dot log and we'll pass in the data all right so let's go ahead and and reload unexpected identify or what's that variable I forgot the equal sign all right so I'll just say hello this is body submit and there we go so we're submitting and we're posting and then we're getting the object back along with the ID that's being assigned to it in the API all right so that's how you can make a post request in jQuery and using Ajax all right so I think we're going to stop there now as of now this is the last video in the course but I will be looking at some other areas of jQuery that we can possibly add on to this alright so at least now you know all the basics and hopefully you enjoyed this mini course and I would definitely suggest that you take a look at the the course that's in the description it's an edge wanax course it's extremely cheap and it'll give you ten projects to build with both JavaScript and jQuery so thanks for watching and I will see you next time

Channel: Traversy Media

Views: 112,878

Keywords: jquery, jquery ajax, jquery $.ajax, jquery post, jquery load

Id: eR3rcalj06Q

Length: 20min 15sec (1215 seconds)

Published: Sun Sep 18 2016