Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:1.7 hours
Getting started with express 400x277
  • Overview
  • Transcript

2.3 Handling POST Requests

In order to work with user input (a POST request), we need to configure our application to use middleware to parse the request body into a JavaScript object that we can then use. You'll learn how to do that and how to pluck data from the request in this lesson.

2.3 Handling POST Requests

In the previous lesosn, we did several things. We started by creating a contact view. We extracted some markup into partials, so that we could use reuse that markup across all of our views, to create a consistent look and feel. And then we finished the contact form and whenever we submit it we got this wonderful error. Cannot POST /contact. Now, this really isn't unexpected because remember that Express doesn't do anything unless if we expressly tell it to do so. And we definitely didn't write any code to handle a post request for /contact. So let's go ahead and do that. Handling a post request is very similar to handling a get request. We use our app object, but in this case we have a method called post. So we have get for get requests, post for post requests, delete for delete requests, and put. So if you plan on writing a RESTful API which many people use Express to do, then you have the methods that you need to handle those requests. So want to handle a post requests and the concepts are exactly the same. We specify the URL as the first argument, then we have a call back function which is going to have the request and the response objects, and then we just do something with those objects. Now since this is a post request this is user input, the user is submitting this to our application. So that means that the request is going to have all of the stuff that we want to work with. It's going to be part of the request body. Now, by itself, Express isn't going to make it easy to work with the data in the request body. Yeah, we could parse it out. But there is some middleware that we could use that will automatically parse the post request body into something that we could programmatically use with JavaScript. So we can have the request object, we will have a body property which will then have a property called email or message, basically the fields of our form. So that's a lot easier. And the middleware that we will use is built in and it is called urlencoded. So here's what this middlewire is going to do. It's going to look for requests that have the content type of application/xwww-form-urlencoded. This is the content type of whatever you submit a form with a post request. That's the content type. So it's going to look for those requests if it has this content type. It's going to parse the body into a JavaScript object. So this means that inside of our function, we can say request.body.email to get the email, but I'm going to do this. I'm going to do trim and I'm going to show you why here. So we'll do message a little differently, we will still retrieve the message but we aren't going to trim it. And then we're going to have a check. For if we don't have a message then what are we gonna do? We will redirect, so we will use our response, we will redirect, and we'll just go to index. Otherwise, we won't do anything. Okay, so, if we submit this, it's not going to take us to index. It doesn't look like anything happened. If we look at the console, there wasn't an error, but the key thing is we didn't go anywhere. The application just kind of hung there because we told it not to do anything. And the reason being because with a text area, whenever you submit a form, even if you don't put anything in the text area, there is some white space there. So we're going to trim all of the information so that all of the beginning and ending white space is trimmed out. That way, if we have a string that's just white space, then we have an empty string, which is then a falsey value. So now let's also have an errors array. So whenever there's an error, we'll just push a message into the errors array, so that we can display them in the view. So let's first of all check to see if we do not have an email. If not, then we will push, Please enter your email address. And then we will do something similar for message. Except in this case we're not going to redirect, we are going to push an error that says, Please enter a message. And then we are going to check to see if we have any errors. So if the length is greater than 0, then we have some errors. And in which case we are simply going to just rerender the contact view, but we're going to pass some data to it. We're going to pass the email so that we can repopulate the email field. We will send the message that we could same thing there. And then we are going to supply the errors. That way, we can display the error messages, and so the user can fix their problem. Now if we make it past this check here, then in a real application, we would want to process that data. So actually send the e-mail, or store it within the database and so on and so forth. In this case, what we're going to do is redirect to an end-point called thanks. And we need to write this, so let's do this. I like to keep my methods together, so if I have a get request for the same URL as a post request, like to keep those together. So up here, I'm going to add a handler for thanks. We'll have our request and response. And what we're going to do here is render the index view. Now in a real application, I would typically have just a view for displaying regular messages. in this case would be thank you for sending the message. I wouldn't necessarily want to redirect back to the index. So having a view for just providing simple messages can be useful. So in this case, our message is just going to be thanks for sending us a message. And that's enough to get started, I believe. So, let's go to our contact view, and we want to display our error messages. So the first thing we want to do is check to see if we have any error messages. So we're going to use an if statement just like a normal JavaScript. And we're going to see if there are any errors. And if not then it's not going to display anything. But if so then it will. Now notice what I'm doing here. On this first line we have if and then our condition. And then the opening curly brace, and I'm putting the closing curly brace on a completely different line. That is so we can put HTML in between the opening and closing curly brace and that is part of the if statement's body. So if we do have an error then we want to display them. And I'm going to use Bootstrap's alert. And we'll have alert danger for the color. And let's also use a element because we could potentially have multiple errors, so, it kind of make sense to list them. But in this case, we want to iterate over our array. So, once again, we will switch into JavaScript mode. And since this a true JavaScript array, we can use the forEach method. And then for our callback, we are going to just display that error. So we're going to do the same thing. The opening curly brace is going to be up here. Then on a different line, we'll have the closing curly brace as well as the closing parenthesis for the forEach. And in this case, we'll have just an li element where we output the error. So there we go. Now, we're still going to run into a problem. And I'll show you why. Let's refresh and we get an error. We see that errors is not defined. Well the reason why is because we are using errors inside of our view. Before a get request we aren't passing any data to it. It is completely undefined, so what we can do then for our get request, is just pass on an object that has email set to an empty string. Message set to an empty string and then errors will just be empty array. So it's easy fix. So if we refresh the page, voila, we have that. If we submit the form, well, we get another error. There's a TypeError on line 40 in App.js. So let's look at line 40. And what do we have? Response render, contact, and new. That's my fault, that's some C# slipping into my JavaScript which is normal for me. So let's refresh with continue to submit that same request and we have our error messages. So let's put something in the email address. Now, we're not doing any type of true validation and true sanitation. We're just keeping things simple. If we were writing a real application, yes, we would do whatever we could to protect ourselves from the user input. Because never trust user input, but in our case we're just doing something simple. And if we submit something for the email address and then send the request, now we can see that we just need to send a message, but notice that we've lost the value that we submitted. So what we're going to do inside of our view then is for our email field, let's put this on multiple lines, we're going to add the value. But then we are going to supply the value that was passed to the view. So in this case, it's going to be email. And let's add some white space there, and we will do the same thing for the text area. So we will have the value of our message here. And if we go back, let's refresh the page. That's going to prompt us to re-submit the post request. There we go, we can see that the email address is now populated. If we supply something in the text area and Submit, we are sent back to the index. We see the message, Thanks for sending us a message. So let's do the reverse, let's have some text instead of our message, but no email address. Well, once again we see that we need to supply an email address, but our text inside of the text area is preserved. So we now have a, well, it's not a working contact form. But it at least looks like it works. So in this lesson, you learned how to handle a post request and get the data from that post request. You learned how to conditionally show information in the view. You also learned how to iterate over an array to display the elements of that array.

Back to the top