In order to save the game states we need to send a POST request. And when it comes to POST requests, that means that we need to send data, we need to send a body and we can send anything, we can send form data, we can send JSON, we can send text. It doesn't matter, we have control over what we send, but most of the time we are either going to send JSON or actual form data. So we're gonna look at both of those approaches.

or actual form data. So we're gonna look at both of those approaches. Before we do that, however, I want to go ahead and implement clearGameState because that is going to make a GET request, but we're gonna have multiple GET requests. So it kind of makes sense to extract that into a helper function. And I'm gonna do this, I'm gonna have a JSON_CONTENT_TYPE constant so that I don't mistype application.

And I'm gonna do this, I'm gonna have a JSON content type constant so that I don't mistype application. See I just mistyped it there. application/json. So then we can have an async function, uh, and we can call it getJSON because that's what we're doing and we will pass in URL so that uh, whenever we call fetch, we will change our URL there and then everything else is gonna be fine. So when it comes to getting the game state, we don't need

and then everything else is gonna be fine. So when it comes to getting the game state, we don't need to include these params anymore because the service on the the server side is now correct, it's going to pull whatever is in the session. So now our getGameState is simply going to be return await, we'll call getJson and then the URL is get.php. And then for our clearGameState,

and then the URL is get php. And then for our clear game state, which is just gonna be a post or I'm sorry a get request, we can use any kind of request. But you know, I thought about delete, you know the idea being hey, we're gonna delete, but delete requests are almost exactly like get requests. So once you learn how to send different kinds of requests, which we will do with sending a post, it's the same thing. So uh, we want to send a get request to clear

which we will do with sending a Post, it's the same thing. So uh, we want to send a GET request to clear php that will clear the game states, we get the game state and now we just need to save the game state. But since we're gonna do this in two different ways, we're gonna write two different functions. Uh, so that our first one will be this we'll just await and we'll call it sendFormData. And then we'll just pass in the state object because that's all that we need to do.

And then we'll just pass in the state object because that's all that we need to do. So we'll have that async function called sendFormData. And we can go ahead and we can extract these into individual values such as midRange, maxRange, maxAttempts. Uh, let's see what else there is secretNumber. There's also allow, I'm gonna mistype that just like I did. So let's open up game.js, that's copy,

There's also allow, I'm gonna mistype that just like I did. So let's open up game.js, that's copy, allow duplicate guesses, then we will paste that in. And then the history. So these are the values that we are extracting out. So that then all we have to do is build an object that we are going to send as form data. We have a special object for that. It's called FormData. So we'll just new up the FormData constructor. And then all we have to do is just build this object. We do.

So we'll just new up the FormData constructor. And then all we have to do is just build this object. We do. So using the append method, the first argument is the name of the field. So just think of this as the name attribute on a form. In our case it's minRange. And then we want the minRange value. And then we just need to copy and paste that a few times and then, you know, change our keys and values. maxRange, maxAttempts, secretNumber.

and then, you know, change our keys and values. maxRange, maxAttempts, secretNumber. I mean everything is gonna be straightforward until we get to the history because the history is an array. But we know how to send an array from a form because the names in our form have the square brackets in it. So what we will do is this, we'll iterate over the history, we'll just call foreach and for each element, uh, we will just simply say formData

we'll just call for each and for each element, uh, we will just simply say formData.append. The key is gonna be history[], and then the value of that element. And there we go. That's gonna build the history part of the formData. And with that we have this object that contains formData that we can just send to the server. So all we have to do now is await fetch.

that we can just send to the server. So all we have to do now is await fetch. Uh, our end point is save.php and then we need to pass in our options object. So now we need to make a POST request. We have a property called method and then we just set that to POST. If we wanted to make DELETEs, we pass DELETEs, PUTs, PATCH, whatever the default is GET. So of course we don't have

whatever the default is get. So of course we don't have to specify get, but we can if we want. But this will be a POST request. And then we just need to provide the body, which is going to be our form data. Now HTML forms have their own content type, but we don't have to worry about that. fetch is automatically going to send the appropriate content type.

Fetch is automatically going to send the appropriate content type with our form data. Now it's not going to do that for every kind of object, but if we send form data, everything's fine. It's going to work exactly like we would think. So essentially what we are doing here is building a form in JavaScript and we are sending that form in JavaScript. In a real world scenario, we would probably want

and we are sending that form in JavaScript. In a real world scenario, we would probably want to do something like this to where we get the response, then we would check if the response is okay and then go through all that. But I'm gonna be lazy and we're just gonna fire this off and we're gonna save that state so that then all we have to do is, well I already wrote the code to send that code using our function. So that's it. All we have to do is create that form object

that code using our function. So that's it. All we have to do is create that form object and send it as the body. Of course we have to say that it is a POST request, but that's it. That's going to send our request to the server and then we will be able to save our state. So inside of the browser we can see that we are making a request for php. We don't have anything in the

that we are making a request for get php. We don't have anything in the session, so we're good to go there. Let's start playing a game. And whenever we make a guess and submit it, um, we get an error. So history array is undefined line 28. So let's go back to line 28. history array. Of course, relying upon code completion can be a bad thing just like I did there.

Of course, relying upon code completion can be a bad thing just like I did there. Okay, so now let's play our game. Let's make a guess. And okay, that worked. If we take a look at our requests here, we can see a POST request, the response is status, okay? And then it also returns the stored information. If we take a look at the request, we can see that it was sent as a form. We have the name of the field and then the value.

that it was sent as a form. We have the name of the field and then the value. And if we wanted to take a look at the headers, let's scroll down. Uh, right here, content-type, multi-part/form-data. So that was automatically added for us because that's part of sending form data. So when you're sending form data, there's one very important thing to remember and that is you are essentially sending form data.

one very important thing to remember and that is you are essentially sending form data. That means any values are strings. So our numbers, minRange, maxRange, maxAttempts, those are being sent to the server as strings. So on the server side, I've had to take that into account and I've had to convert those back into numeric values because they need to be numeric. But just keep that in mind. You are sending a form,

But just keep that in mind. You are sending a form, you're just doing it through JavaScript. And this is incredibly easy. I mean we just create a FormData object, populate it, send it, and we're done. The only thing easier is sending our data as JSON. I don't even want to copy all of that. So, uh, let's do this. Let's comment that out and we're going to await sendJSON.

So, uh, let's do this. Let's comment that out and we're going to await sendJson. Then we'll pass in the state object. And the reason why this is easier is because, well we don't have to go through this whole process of creating the form data, even though creating the form data is very easy. So we're gonna have sendJson, we want our state object and then we're just gonna copy the code for calling.

we want our state object and then we're just gonna copy the code for calling await fetch. So we're still gonna save, but here we need to supply some other information like the headers because we need to specify that this contentType is our application/json content type. So by sending json, it's not going to automatically know that it's json.

So by sending Jason, it's not going to automatically know that it's Jason. We have to specify it. So contentType is Jason. We're still gonna send the accept header. We don't necessarily need it because it's always going to return Jo, uh, Jason, that's how I wrote it. But still we will include that. We still want to make this a POST request, but our body now is simply going to be Jason string of five

We still want to make this a POST request, but our body now is simply going to be JSON string of five and then our state object and that's it. So it's a lot simpler, but it's still going to work for us. Alright, so we are now going to send that data as JSON, let's refresh. Let's not load it. Let's play the game. We'll make our guess of 1. Uh, we don't need to see our requests or do we, I mean, yeah, let, let's take a look.

Uh, we don't need to see our requests or do we, I mean, yeah, let, let's take a look. So our headers. Now if we scroll down content type application, json, our request is json structure. We can of course see that in raw format and then the response is practically the same thing that we had before because that's how I coded it. So we get the response back that includes what was stored and everything else is going to work just as it should.

So we get the response back that includes what was stored and everything else is going to work just as it should. So sending POST requests with fetch is very simple. We supply the URL, we specify the type of requests that we want to make, such as POST, and then we just supply the body with the request. The body can be anything that we want, however, we most commonly either send it as form data, which is an actual form just sent with JavaScript or we send it as JSON.

which is an actual form just sent with JavaScript or we send it as JSON. But if we send it as JSON or if we send it really anything other than a form-data, we have to supply the Content-Type header.