Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:7Length:53 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Collecting and Using Form Data With GET Requests

In this lesson, I'll show you how to collect form data so that you can include it with your GET request. This is useful for fetching filtered data.

2.2 Collecting and Using Form Data With GET Requests

In the previous lesson, we started looking at Axios by making a very simple request. It was just for a URL. There was no data, no parameters, no nothing just a simple URL. We received the response and displayed some information in the browser. We also very briefly looked at the error object, by just writing that out into the document so that we could see that there was an error that occurred. Well, in this lesson, we are going to take things a step further. We are going to read a form, and then use that to submit a query. To the server, so that we can get some filtered results based upon the criteria that we specify in the form. We're also going to dive a little deeper into the error object, because just displaying the error isn't enough. There are many things that could cause a request to fail and so we will look at how to get some extra information from the error object. So, let's just dive right in and let's get started. The first thing that we need to do, is handle the submit event for our form. Because we don't want the browser to submit the form because there's nothing for it to submit to. Instead we're just going to do everything through java script. So, let's start by being good java script developers. And have an immediately invoked function, so that we can protect our code. And then we will retrieve our form element from the document. We will save it in a variable so that we can easily access it whenever we need to. And then, we will set up that submit event listener. And the first thing that we need to do, is prevent the default action from occurring, so let's do that, with the prevent default method. And we have a good start there. Now, we have our submit event listener. The first thing that we need to do then, is decide how we are going to send. The form data, because we could do that in a variety of ways. The first, would be to use a query stream. Actually, let's just write the code. We could say axios.get. We would specify the URL, and then we could tack on the query string, so that if we wanted to find the guitars with a particular neck material, like maple, then we could do that. Then in the old days, that's what we had to do. We had to build a query string. It's not overly difficult, but it does require a lot of extra code. Well, in this case, we don't have to do that, because Axios will allow us to send an object basically. It's going take an object that we provide, where the properties are the parameter names. And then the values are the parameter values. And then it will build a query string for us. So, after our URL, the second argument that we're going to pass is an object that contains several different configuration options. One of those is called, params. And so this is going to be the object that is going to contain all of our parameters that will then be converted into a query string. So let's call this queryObj. And then we will build that. So, let's first of all create that. And then, we will build it. Now, how we will build it, is actually quite simple. Every form object has a property called elements, this element is a node list that contains all of the form controls including the button, in a form. So, all we have to do is just iterate, over this elements object and get the values if there is a value. So it's going to look like this. We're going to use the array methods for each method but we’re going to call it, as if it were being called on our elements object. Now some browsers will let you say form.elements.for each but others won’t. So, by writing it this way it’s going to work in every browser, and then we have our call back function that is going to execute on every element. And all we have to do then, is check to see if that element has value, if it does then we will add it to our query object. So that the property is going to be the name, and then the value is of course going to be the value. Another way that I have set this up is that, the names of the fields in this form, manufacturer, neck, and frets. Those are actual properties on the guitar objects, so that there's no having to convert from a form field name into a property name or anything like that. It's just going to work. And so with just a few lines of code, we've built our query object, we are passing that as the params for our request, and then we just need to handle the response. So we will call then, we will get our response and then we need to work with that response. And you know what? Let's just take what we did in the previous lesson and copy and paste that so that we don't have to rewrite that. And of course we do need to change the ID of the results, because I do believe it is different in the search page, it's called search results as opposed to guitar list. So, there we have that change, but let's go ahead and let's handle any errors that would occur as well. So let's have our catch. We will pass in the callback function for that. And there are essentially three types of errors that we can check for. The first, are response errors. And these are probably the most common. This means that you sent a request and you successfully received a response from this server, that was not within the range of 200s or the 300s. So we're talking about 400, 404, 500 anything that denotes an error. So here, what we can do then is display some information about the error that came back from the server. So let's just alert this. In a real application, we would of course want to not use an alert, we would want to display this somehow in the document, but this is going to be okay. So let's first of all say that we have an error. And then let's go ahead and say what the status code is. So, we'll use error.response and then status. That will get the status. Now we can also use the body that came back with the response. And that body can be in a variety of formats. In the case of our application, it's going to be HTML. So we will see that, whenever we display the error here in a few moments. But it could also be JSON encoded which AXIOS would automatically parse that into an object or an array. It just really depends upon what type of data is coming back from the server. So in this case, we're going to say error.response.data so that we can see some more information about the error. Now the second type is a request error. This is something that we would see when we make a request but we don't receive a response from the servers. So, it's a network connectivity issue, or the host is down, or anything along those lines. So we can check for a request error with the request object. However, I should say that even if it's a response error, you will have something here with the request object as well. Because it's typically the XML HTTP request object. In fact we could see that. Let's alert error.request. And we will see that it is XMLHttpRequest. So we can use any of the properties on the XMLHttp object in order to get information that occurred. Now, the third type is just a general error. And this typically occurs whenever something goes wrong with creating the request. So the request hasn't really even been sent yet, in which case, that's a problem and we would just want to display the error that occurred. So let's do that. Now we can test for a few of these. I, quite frankly, don't know how to make third error happen. So what we're going to do first of all is, see a response error, because there is a typo in this code. You've probably already caught it, but right up here, theURL is api/guitar not guitars. So let's go to the browser, let's refresh, let's perform a query for a guitar made by Fender, and we get a 404 because that resource, API/guitar, does not exist. So Express is saying that, it's not valid. And so let's fix that. And let's go back. And let's refresh. Let's perform that same query. And we see just one entry. That's what I expected. So now, let's do a search for guitars with a mahogany neck. I think there two of those, they are. And then let's do a search based upon the frets so we can have search for 22. And we have another 500. And that is interesting, we should not be getting that at all. But this will give us an opportunity to test the request error. So let's go to the server. Let's stop the server from running. That's control C. And the error that occurred was on line 58, so let's keep that in mind. And then let's make this same request. Now it's going to take a few moments, but eventually we will get the the alert and we see that it is an XML HTTP request object. So this was as request error. So let's very quickly, look at what I have Inside of my guitar data, what did I say, line 58? Well there's no reason that we should have hit that to begin with. So probably, I never restarted the server after fixing some code. So, let's just run this again and let's refresh. Let's do a search and yes, that's the problem. So, everything was fine, I just didn't restart the server. All right, so we have our search working, we are successfully reading the data from the form. We are sending that data to the server in order to perform a query against our data store and then we are displaying that information while handling any type of error that could occur. In the next lesson, we are going to follow along the same line of thinking but we are going to make a post request

Back to the top