How to make a POST request with the HTML form element

This page is a guide on how to make a POST request with the HTML form element. First I'm going to explain the difference between POST and GET. Then I'll teach you how to change the method to POST. Next I'm going to explain what a server is and walk you through making a server that acknowledges it received a POST request. After that I'm explaining how to store data and modifying the server to store every request. Finally I will explain what a response is, how every part works, and how the server can send responses with the data it contains.

The intended difference between POST and GET is that POST sends data while GET retrieves it. The practical difference is that POST's request body can transport more data securely. In theory changing the method is as simple as changing GET to POST. In practice POST requests have very little effectiveness unless you add a server that can store requests.

Usually there are two parts to a server, the hardware and the software. Since we're using Val Town we don't need to worry about hardware details like buying or renting a computer. For some reason the industry term for that is serverless despite the fact you need to write server code. I have no idea why. I just memorized that a serverless product is jargon for the company handling all hardware challenges, but not server code despite telling me not to worry about the server. The software aspect technically could only be three parts, but most of the time it needs a fourth part to be useful. The first part is receiving a request. The second part is processing the request. The third part is sending a response. The technically optional part is storing the data.

How to make a server that processes POST requests

1. Fork your val you made for the last guide here.
2. The first step is to change the GET method in the client to POST.
3. Now it's time to start working on the server. The location of the server is between what is currently the first and second line. The first part of the server is determining if the method is POST. It does that through using req.method in an if else statement.
4. Then if it's the right method, it's time to extract the object containing the request. You do that through creating a const variable with the name of formData and the value of await req.formData();. I'm being so specific with the name of the variable because that's industry standard.
5. The next step is to manipulate the request so it can be useful. There are a lot of ways to manipulate the object and if you're curious read this documentation. The way we're using is .getAll(). The name of the const variable doesn't matter. The input to .getAll() is the value of the name attribute. Since I realized my description might not be clear, I included what I have. It's const name = formData.getAll("name");.

Now we have a server that accepts requests and processes requests. A HTTP Response is data sent from the server to the client. It always has three parts. The first part is the status line which has three components. The first component is the HTTP version number. The second is a three number response that states if there was a problem and if so what it was. The second part of a HTTP Response are the headers just like the HTTP Request. The final part is the body which contains the requested data. It's usually something like HTML or JSON.

There are five categories of response status codes. The first category 100–199 is informational and means the request is in progress. The second category is 200-299 and means the request is successful. The third category is 300-399 and means the request got redirected. The fourth category is 400-499 and means there's a problem with the request. The fifth category is 500-599 and means there's a problem with the server accepting the request. If you want more details read HTTP response status codes documentation.

There are four types of response headers: Content-Type, Cache-Control, Access-Control-Allow-Origin, and Set-Cookie. Content-Type says what type of data is being sent back to the front end. Cache-Control says if the response is worth saving and how long if it is. Access-Control-Allow-Origin determines if a website is permitted to use the information. Set-Cookie sends new cookies to the browser to store.

How to make a server that sends responses

The location of the response code is in the if else statement near the end and after the const variable that uses .getAll. The template is

The next step is modifying the server so it can store data. It's more complicated than saving data to a variable because variables lose all data every time you save a version. On Val Town there are two ways to store data long term. They are blob and SQlite. Both of them have 10mb on the free plan and 1gb on pro. The difference is that blob storage is just key value while SQlite is a database. Since it doesn't make sense to use SQlite's data unnecessarily and it's complex enough to be its own guide, we're using blob storage.

If you want to see the end result, go here.
1. The first step is importing. Paste import { blob } from "https://esm.town/v/std/blob"; at the top of the val.
2. Next you need to either create the key or get the value of the key. You do that by creating a let variable with the value of await blob.getJSON(key).
3. Then you need to use the push method to add the value of the name variable that came from the POST method to the let variable made in the last step.
4. Now you need to update the the key. You do that with await blob.setJSON("key", let variable with value of key);
5. From a pure content point of view, there's only the minor issue of the most recent name being last and isn't worth fixing by itself. However from a grammar point of view, it needs work. The primary problem is that the only thing that separates words is a singular comma and no space. A secondary problem is that there is no word and between the last and second to last name. I solved those issues through a combination of slicing and .join.
6. Now there's only one minor problem left. You get the same response from the website regardless of the number of names. I fixed the problem through using .length to see how many names and an if else statement to change the response based on the number of names.