6.2 Interacting with the Server-Side

[SOUND] In the previous lesson, I taught you about the load method and how easy it is to load method. Today, we will look at jQuery.get and jQuery.post, and we'll learn how to interact with the servers to maybe update a database or save something. So, let's try this out. We're going to create a form, and within here, we will have a text area, and the name will be content and we'll give the same thing to the id. And we'll also give it a heading. Mostly, we're going to work with proof of concept here. I always have trouble when I'm learning and the projects the teacher is using is way too complicated for me to wrap my mind around. I like to boil things down to the core. Exactly what it's doing and nothing else. So, here we're going to have a form. And we're going to add a text area, and the user can type anything we want. And when they click on a button, it will take the results and post it to a server site script that will save it either maybe to a database or in our case, to keep it simple. We're going to save it to a text file. So we review it, and that looks good, let's place this within a paragraph tag just to get some automatic styling. So we type in here, we click Save, and what we want jQuery to do is intercept that, disable the default action, take the contents of the text area, and post it. So let's try charting this out, we want to listen for click,. We want to disable the default action. We want to grab what the user types in. And then lastly, we want to post that content to a script. And that content will ultimately be saved to a text file. So let's begin. Listen for click. Well, in this case, our button is serving as a submit button. So really what we can do instead, is listen for when the form has been submitted. Lets try that jQuery form on and we're gonna listen for when it is submitted and then execute a callback function. So at this point, we will simply log submitted to make sure that its working. I'll type something in here, click Save and we did see submitted just for a brief second, but then the page posted back because we submitted the form. So next, we need to disable that default action. Paste it in right here, and we will grab the event object and run e.preventDefault. So let's try that. We come back, type something in, click Save. And now, we've disabled the default action when the form is submitted, and we have successfully logged the word submitted, but what we really want here is what the user types in. And there's a couple ways that we can grab this. One of them is simply to grab the form that was submitted, and we're going to find the text area with an ID of content, and we're going to grab not its HTML, but its value, and we can use jQuery to access that by using the val method. One more time. Type some gibberish in here. Click Save. And now you can see that content was logged to the console. One more time. Save and we get hello there. Now another way we could do this, is we could serialize it. So this is an easy way when a user submits a form, and you want to serialize that data, this.serialize, and then there's also serialize array, which this is really pointing to. Let's try this one. One more time, type some gibberish, and now you can see it's that it will take the name of the input. In the case, textarea name is content, and then it will do its value. So it will do a list of key value pairs. And if I have another one, perhaps, right here, we'll just have a simple input. Name equals name. We'll type Jeff, put some gibberish in here. You'll see that name equals jeff and content equals this. And that way it's an easy to way to serialize the contents of a form and then you can post that wherever you need to. So you can use either method that fits your needs. In our case, we'll stick with serialize. So we'll get rid of the earlier one. And now, we're going to create a post request to a specific file, we'll call it save.php. We'll use php since it's the most popular. I'll create that file now. Note that if you're working along, you need to be working on a server that has access to PHP and can execute it. So now, we've created that file. I'm going to post to that file. So the first parameter, where are we posting to. Save.php. The second parameter, is there any data that we're going to send to it? Yes, we're going to serialize the form and send that through. And the third parameter will be an optional call back. Is there anything that we want to do once this action has completed? For now, we will console.log completed. So at this point, the user typed something into the text area. Note that we haven't determined if they've typed anything or not. We're just listening for the form being submitted. Then we serialize that form and we post it to save.php. Now in PHP, we can access the results by using the dollar post super global. Now, in our case, we want to grab the value of content, so we're going to post content here, and for now, let's just echo that right back out, so it's going to receive a post, and it's just going to echo that right back out. So now, the results of that will be sent to the call back, and let's log that to see what we get, console.log data. When I type something, click Save and check it out. That's what's being logged to the console. So that might seem simple, but that's actually really neat. So we are grabbing what the user typed into the text area. We are posting that to save dot PHP. And for now save dot PHP has taken the results and just returning it. And that's what we're echoing. So we could also echo post dot PHP and tack on from PHP just so you can understand what's going on here. It is receiving that data and then its returning it by echoing it. One more time, hi there. Click save and we get hi there from PHP. So, now we're able to communicate with our server without having to reload the page and that's really neat. So in this case, as we've learned, we want to save whatever we send through to a database or a text file. Now I really don't wanna worry too much about the server-side because we're all going to be using different languages or frameworks, and that's an easy way to get distracted when you don't understand the server-side language I'm using. So I'm gonna keep this as short as possible. With PHP, we can save a file by using a couple functions, file open, and we'll save this to a variable called f. So we're going to open a file called data.txt. We're just going to use a text file to store this. Next, I'm going to pass in a flag that says I want to be able to write to this file. Okay. So now that we've opened a file to write, we are going to write to that file. What file? The f variable that we saved. And what are we writing to it? Let's, for now, hard code this in. Hello there. And then we're going to close it because we are done. So, we simply open a file, we write some text to it, then we close the file. All right, let's try this out. I'm gonna come back and go to that page directly, save.php. Now we're not going to see anything, but if we did it correctly, sure enough, we get data.txt, so now we know that it's working. Now at this point, we're simply going to save $ Post, and we're going to get the content that was sent through, and we're going to save that through a text file. And then we're going to close it. So come back, and we'll say, here is my comment. I will click Save it. So, we haven't seen anything, but behind the scenes, a post request was made to save.php. Php grabbed the value of the content, and remember, content is coming from the name of the input or the text area. So when we serialized it, we got content equals whatever the value was. If we had another one, it would take the name attribute and use that as the key. And that way in PHP, you could use $_GET and the name, or $_POST and the name depending upon which one you want to use. Now we go to data.txt and we grab that value. And this is really cool. Now we're communicating back and forth. So then at this point, if we want, we could say, echo, comment has been saved. And this is what is going to be returned as the data callback. Whatever you echo, will get returned and then at this point, let's just do something really quick. We'll alert that data or if it is easier, we'll change this to response. What's up, click Save. It's being saved to that hex file, and we get the results, comment has been saved. And now the user can continue on. Now, just as with .post you can also use jQuery.get. And you wanna use jQuery.get for things that aren't vital for security. For anything, maybe you want to post a comment, anything that need some security, always use post. But if it's something simple you want to just pass a value from page to page or something like that get is a good way to go. Now if we were in a situation where we wanted to use get, we could simply change that .get, the api's gonna be the same and then with php, you'd access it using $_Get. Or in your service site language of choice it might be a little bit difference. So I will backtrack just a couple steps. And the final thing is, maybe when the page loads we want to automatically populate this with whatever was saved, if anything. So we can do that. We'll create another file called load, or we could group these together. Well, let's keep things simple so it's easy to understand. And when the page loads, right here, we're going to submit a post to load.php. We're not passing anything through, mostly I just want the results. So we'll store that within data, and then load.php wants to grab the results. So we can use file, data.txt, and that's going to return an array, so we'll store that within a variable called data, and I'm going to echo out data in the first item in that array. So now the page loads, we make a request to that file, that does whatever it needs to, it queries a database, or in this case, just grabs a text file database and it returns that. And let's console.log data to see what we get. Reload the page and we get what's up. Now if you're in a situation maybe where you're expecting JSON, you can also pass that as well, and then you could do something like JSON encode with php json_encode and it's pretty much business as usual there, but we'll keep it simple for now. Now you'll note that if we come back to the console, you'll see that we have escaped it, so we've added those slashes. If you want right here before we echo it out, why don't we strip slashes, or you could do this with the JavaScript and now we just get what's up. Then the page loads and we can say if there was data returned, in that case, we will grab the text area with an id of content, and set its val equal to whatever was returned. Reload the page. And now we've got it. Cool. So let's do our last test to make sure it's working. We'll say lorem ipsum [FOREIGN]. And we will Save it. That's been saved to the database. We've ensured that, and that way in the future when we reload the page, if anything has been saved, it will be loaded and added there. So this has been a very simple example. You can get far more in-depth than this. But it's good to know how easy it is with jQuery. We simply use the jQuery.get or jQuery.post. Or jquery.get jsonn if we specifically want to receive json in response. But as we know we can also use jquery.get and set that third parameter to json to get the same effect. These are simply helper methods that point to jquery.ajax, which is what we're going to take a look at in the next lesson.