Using AJAX with Laravel

this is everything from coding faculty calm and today we're gonna be learning how to use Ajax with Lara Bell okay so let's get going I got an installed of flower bail here this is where I was showing you guys in another video how to upload files with Larrabee ok that was a pretty interesting lecture remember that all the code for this video and all my videos are in the description that's the way the link is and remember that I also have a school called coding faculty where you guys can take a look at some of the free courses or even subscribe to the monthly membership and gotchas all of our courses okay plus we have life support as well okay enough with the advertisement let's actually start playing around with it so this is the this is what we're gonna be doing okay first we're gonna build a view that's going to have the form that we're going to be using to send the request so here is a procedure we build a route first then we build a view that's gonna have the form with the form I already have a form here but I'm gonna copy this with the form we are going to attach a click event to this form with JavaScript and we're gonna use jQuery in JavaScript then with that we're going to execute an ajax function to actually send the request via javascript to the server catch it in the server and dump in that request so you guys can see how it works and we can send back a response to the front end which is a HTML from the server just to let us know that it worked okay so very simple we build a route we build of view we attach the age the JavaScript to this form to so we can listen for the form submit with JavaScript we use Ajax to send the request to the server from the server we send back the response ok to the front-end super simple so let's get to it so first we're gonna need a request for the form a route actually and we can name this whatever we want and you know we can do it we can do this right here we don't even have to go and use it in the controller but I want you guys to see it very similar to your setup I want to do a very similar to the setup that you're gonna be doing so that way you guys don't run into any problems so we're gonna have the Ajax form here I'm just gonna put this like this there's gonna be a separate I got a home controller already okay home controller at a Jat form on the score form like that okay I'm gonna copy that and this one is gonna be very similar but it's gonna be a post request okay and it's gonna be called Ajax very similar okay now let's go to the home controller actually attach it so attach those public function what am I doing here public function Ajax form is the first one okay and this is just gonna return the view simple nothing be big and we don't have that view yet but we're gonna create it in a minute okay now let's create it and I'm gonna create it from this from the home view that I got okay and remember this code is gonna be available to you in the description okay so you can click there and I'm gonna have all this code now basically you need you just need a form guy's a regular form you don't need the whole code but it's you're gonna be available anyway what was I doing alright so in the view directory I'm going to create another blade file I'm gonna call this a Jets form just like that I'm gonna paste my form in there and if I go to that Ajax form I'm going to have a form okay if I go to that URL simple so now that we have that the next step okay would be to attach the JavaScript to this but I want to make sure that it works first before I attach it we you know I want to make sure that document has loaded so jQuery has a really cool functionality it has a document that ready function that we can use so I'm gonna copy jQuery and I'm using the CDN of jQuery you can look it up on Google jQuery see the end and I'm gonna do a script SR see tab and actually I don't need to do that because I already had a script tag I was using an image shortcut I got all those courses in coding faculty guys alright so now that I got jQuery here I'm using version 3.3.4 jQuery called ready so we attach to the document we use the ready function make sure that everything has to load it and I'm just gonna do a console real quick console that log we're gonna log hi let's come back here I'm gonna open up my developer tools in chrome and if i refresh we can see that it says hi here so my documents loading I know that it is loading so now we can attach there are different ways of doing this I can attach a jQuery we need a for a function that is going to detect when the function was formed what submit submitted I can attach it I can attach a listener to the native submit method or function that JavaScript has or I can simply attach a listener an event listener here with an ID I just say ID here age at submit so this ID here so I'm attaching the eventlistener to the submit button so I'm gonna use jQuery again like that and I'm gonna touch that click event listener there I'm gonna say well when that somebody clicks on that I want to listen to it but what I want to do here is I want to access the event I want to make sure that I default and I don't show you the default right now if I click Submit you can see that that's refreshing right we don't want that because we are using javascript we don't need to send the request via the forum we want to use Ajax for that or JavaScript but you might call it so I'm gonna use that event to say I want that if a default event default the full function I believe it was I forgot the name of it - - preeya okay it's prevent prevent default there are so many different functions guys okay all right so now if i refresh here make sure if I click here you can see now that that's not refreshing is not you don't see the little circle going around right a little that's not doing anything anymore perfect is it working though well console that log it works let's refresh and let's click it and you can see that it works here my developer counter consul so I'm gonna comment that out because I might need it later now what I want to do is I want to set up the default settings for Ajax we are about to send Ajax we are about to use Ajax I want to set up the headers one of the reasons I want to set that up is because I'm gonna we're gonna have some type of error when we set up a post request using Ajax so our server or a lot of our installation uses this CSRF field or cross-site forgery requests prevention here or you know secure ding and if we don't send a talking that's actually in our form I'll show you right now if I inspect it if we don't send let's see if I can find the form right here we don't send this value to that request we're gonna get an error okay so we need to set up the headers and in that request okay they had a request so there is a function called a jet setup that allows us to set the to set up a judge before it happens before we send a request so a jet setup right here and now we can use this function to set up the headers so I'm gonna say headers and not making this up this is already the browser is already expecting the headers values we're just gonna give it a value now okay so this is already something that it's expecting expecting in every requests in the headers but we got to make sure that we send the right information so that way we don't get this stuff from you know the cross site the cross I requests type of warning okay this is something that browsers actually implement all right chrome implements our Firefox they don't want other people from other sites you know sending requests from your site so that's something that that they they are looking for so we got a set up that the headers that's something a little bit more technical a little bit hard to explain without showing you code which I'm not gonna go into that now so the value will be this and I mean the the key and the value it's something that we need the value is the token this field here has it now this function CSRF field it's this whole input okay as you can see the whole input the input has a value and as an attribute - I'm not gonna attach myself to that laravel in the app that blade file okay has that has this meta element here that has this same value okay so when you do PHP artisan make off to make you know the authentication for laravel as you can see here we have register this command right here if you don't know I'm going to show you not that but PHP as a matter of fact let's go back to a jets I'm gonna show you the command right here it's called it's PHP artisan make off when you do that command that's gonna produce a lock up of files and in this app that bleh we're gonna have by default you're gonna have something like that and we're gonna pull it from there because it's more it's better because we have it there already so I'm going to make some requests here with jQuery I'm gonna say i1 I'm gonna do double quotes here I want to watches the meta element and inside the meta we have a name attribute that has the C S and this is the let me see this is what we want right here okay that okay now I have attached myself to that element and I want the attribute of that element so I now have another function call attr that we can use to access the content of value so now if I go here you can see that a Content value is what we are getting which is that that they're talking I don't know how to pronounce that very well and we can do a console that log here used to make sure that we have that but I'm pretty sure that we do okay but let's go ahead and take ourselves out of doubt and I'm gonna come and know this and I'm gonna do console that log because we're gonna make sure that we have it and I'm just gonna console that that come back here and let's refresh again oops what did I do [Music] refresh now I'm gonna submit and you can see that we have that value there okay perfect so just making sure and that's how it's better to do that now than then later alright so now that we have that value we are ready to be sending Ajax requests so now let's use the function a Jets just like that Dallas core you know Dallas symbol dot a Jets and then inside here there is this object that we need to configure we first need to tell it a we're sending the URL what's a URL of our application I'm gonna use a function let me use bleh here I'm gonna use a function called URL okay to give me that path that I need and it's going it's going to be a Jets just a Jets I believe that's what we named it in the here okay so we got the URL now we need what's happened to tell it what type of method it is and I'm just gonna say Pozzo upper case I don't need to upper case it but I like to do that now we need to give it the data okay I don't have any data that I want to send as a matter of fact we do have a file data so I would have to actually access that value there so let me just give it an ID of file okay so I'm just gonna say well I'm going to add to that file and then I use a jets for that again and file there we go simple as that and let's just do the value all right so that's the data here we're gonna have we can have a key here and we can attach a function to it the success key is gonna let us know if everything went all right and that could be bring back the result simple as that and then we can say consult that log and the result here okay we can extend this a little bit more and we probably will okay I just want to make sure you know that it works so let's go back to the home controller let's set up that function that's going to receive that request remember that this function is going to receive a post request so we can have the poke the request right here and let's do a die dump here real quick die dump on the requests as a matter of fact let's just die dump the file okay just like that let's refresh here let's see if everything goes according to plan and submit let's go back here so that was a that was a response from the server okay it's dye dumping all that stuff and so let's go back here and let's do this so we're getting a result back from the server let's try to get it in a different way guys so that way we can see Lexus where is it let's go back to the home controller and let's not that dump it let's just let's return it as a matter of fact we can if we want to return something like what Yuma call it like Jason so let's just do hmm if I remember the JSON function response there we go and let's just do Jason right and we can say this is the result and we can just access access that result right here just like that okay now this should be a little cleaner now to get the result okay so that way you guys can see it let me make sure this is right perfect okay and let's choose a picture again submit and voila there we go we got the result we got the name of the picture you see that awesome so that's how we saw object in Jason and we got it we got it really good perfect let's extend this a little bit and and you know and do it like we would do in an application basically in an application we will show the user some type of notification here that a request was submitted successfully so let's do that let's go back here what I want to do is below the form I want to put some type of def that is going to allow the user to see that something happened okay some type of alert or something so let's do DIF that alert from bootstrap alert success and I'm gonna give it a display of none because I don't want to I don't want to display this little def right now so display:none just like that all right even though you know buddy wasn't you know if I if I didn't do this it was gonna show like a green line or something like that I believe so now we need to in our success method let's attach ourselves to that okay so I'm going to attach myself to the alert and the first thing that I want to do is I want to show it okay another thing that I want to do I think my idea is gonna cry when I do this it doesn't like to see the same thing over and over again I'm going to insert some HTML in there let's go back to the home controller and let's see what we can attach here let's actually create a success key here Jason and let's just do data saved successful data this was saved this was saved okay so go back here I'm going to get the result and attest to that I'm gonna concatenate the let's come back here and I just give it a different name let's just call it data the result that data that should be good there all right there's something wrong here yeah that's wrong and this one yeah that's wrong there we go see that's when my ID was crying I know he was gonna cry doesn't like to see duplicates all right so let's refresh this I'm going to do this and when I click Submit you can see this was saved and you can see what was saved awesome right of course he's not going to show the user this was saved I mean you're not gonna show they use of the data but I wanted you to see the data okay and we can come back here and of course the lead this and say record was saved successfully that's more like it right oh and there's something here awesome awesome and you guys can take the other lecture if you want to see how to a store upload files if you don't know how to do that yet so I'm click Submit you can see record was saved successfully perfect so now you guys know how to use Ajax with laravel if you want to know how to upload files just take my other lecture if you can't find it here in YouTube or anywhere else go to my free courses and it should be there somewhere okay just look for it I should leave a link in the about in the bottom of the description to where you can actually download the code or even download the lecture guys this is something that I allow all my users to do download the lectures in my school so if you go the angular and there is 20 lectures or 30 lectures you can download into your computer you can watch him offline awesome right alright perfect so there you go guys beautiful see you in the next lecture I hope you liked the video and I hope you guys liked it like give it a thumbs up let me know if I'm doing ok and if you need any help let me know we are here to help you in any way we can thank you so much and I'll see you on the next lecture

Channel: Coding Faculty

Views: 16,759

Keywords: edwin php, edwin laravel, ajax laravel

Id: nCYwWHXB3Hs

Length: 24min 17sec (1457 seconds)

Published: Tue Sep 04 2018