Updated "Introduction to Python Web Application Homebrew for Slow 3rd Year Web Engineers"

Online book updated

Chapter "Allow POST parameters to be handled" has been updated.

If you want to read more, please "like" or "follow me" in Book ;-)

The following is an excerpt of the contents of the book.

Handle request body

At the end of the previous chapter, when I looked at the result of accessing / show_requests in Chrome, I found that the request body was empty.

However, even if the body wasn't empty, our web application hadn't yet done anything to translate or interpret the request body. Since it's a big deal, let's be able to handle the request body here.

The request body is used to send additional information (also called parameters) from the client to the server, and is used as an example in the request of the POST method (hereinafter, POST request).

In this chapter, let's learn how to handle the request body by implementing the processing related to the parameters of the POST method.

Send a POST request and observe the body.

Before we talk about it, let's start by observing how the request body is actually used.

Send a POST request

When the browser sends a POST request, it is typically when the submit button on a form created with the<form>tag is pressed.

Let's actually create HTML containing the form and experiment.

Create the following HTML in study / static.

The content is rudimentary HTML and doesn't need to be explained in detail. There are various types of input forms such as text boxes, pull-downs, and select boxes in one <form> tag.

study/static/form.html https://github.com/bigen1925/introduction-to-web-application-with-python/blob/main/codes/chapter15/static/form.html

Also, from this time, we will change the response header a little. The encoding of the character string can be specified in the Content-Type header, and it is necessary to specify the encoding corresponding to Japanese in order to display Japanese in the browser.

Encoding is a complicated story, so please add it, thinking that it is the same for those who do not come with a pin.

study/workerthread.py https://github.com/bigen1925/introduction-to-web-application-with-python/blob/main/codes/chapter15/workerthread.py#L169

This file is in the ** static directory and is subject to static file delivery **, so access http://localhsot:8080/form.html from Chrome with the server running. Then you can display it.

When the type =" submit " element (hereinafter referred to as the submit button) is clicked, the browser sends a POST request to the URL specified by the action attribute of the <form> tag. To do.

If you omit the host or port for the URL specified in the action attribute, it will be sent to the same host / port as the currently open page. In other words, like this time

--The currently open page is http: // localhost: 8080 / form.html --<form action =" / show_requests ">

In that case, the POST request will be sent to http: // localhost: 8080 / show_requests.

Now, enter the value in the form as shown below and press the submit button.

As explained earlier, the input to this form will be sent to the POST request / show_requests. Since / show_requests should have displayed the contents of the HTTP request in the previous chapter, it is a calculation that you can see the contents of the POST request with this.

In fact, when you press the submit button, you should see something like the following on the next screen.

You can see that the request body contains the value, unlike the case where you simply enter / show_requests in the URL bar to navigate the page.

Also,

Content-Type: application/x-www-form-urlencoded

Also note that a new header has been added. Later, I'll explain how this header makes a lot of sense.

Observe the body of the POST request

Now that you can see the specific contents of the body of the POST request, let's observe and study. If you look at the request body, you can see that the values of individual input forms such as text box and password are concatenated and passed in a fixed format.

The format is for one input form [Value of name attribute of HTML element] = [Value entered in form] There is a pair called, and the values of different forms are connected by &.

Also, you can see that the half-width space is replaced with the symbol+, and theline feed codeand Japanese are converted to a mysterious character string ** starting with ** %. (For Japanese input values, see the hidden_value value)

Also, in the input form that allows multiple selections like the <select> element, it seems that multiple values are sent with the same name. Example) check_name = check2 & check_name = check3

Also, when I look at the uploaded file, only * the file name * is sent, and the contents of the file are not sent.

About the format of POST parameters

When sending the data you want to send in a POST request (hereinafter referred to as POST parameter) to the server using the request body, the format to send is important. The format here is what symbols are used to represent the parameters name and value in the request body, what symbols are used to separate multiple data, and multi. How to represent byte characters, how to represent binary data such as image files, and so on.

There are various types of formats, but if the recognition of this format method is different on the client side and the server side, the sent parameters cannot be recognized correctly on the server side. (The client side thinks that the symbol = is a "symbol that separates name and value", but the server side thinks that it is a "line feed code" and interprets it. , I don't understand why.)

Therefore, when sending a POST request, it is necessary to specify the format with a header called Content-Type that indicates the format of the request body.

In this case,

Content-Type: application/x-www-form-urlencoded

Is that.

Below, I will introduce three commonly used formats (Content-Type).

application/x-www-form-urlencoded This is the default format used if the browser does not specify the enctype attribute in the<form>tag. Also known as "URL encoding" or "percent-encoding", the format is defined so that various data can be represented using only the characters that can be used as URLs.

As we saw earlier,

1. Concatenate the items name and value with =
2. When sending multiple items, concatenate with &
3. Use + for half-width spaces
4. Characters that cannot be used in other URLs are encoded in UTF-8 and the byte string is represented by% XX.
5. Cannot handle binary data that cannot be encoded in UTF-8 (when uploading a file, the contents of the file are not sent)

And so on.

multipart/form-data This can be used by explicitly specifying it with the enctype attribute, such as<form enctype = "multipart / form-data">. Let's take a look at the contents before explaining.

Specify the enctype in the <form> element of the form.html created earlier, and submit the form.

Note

** If you want to check the display when uploading a file, please use a browser called Firefox instead of Chrome and send small data (such as an image of several KB). ** **

Chrome and Safari use keep-alive to send requests in multiple times when sending file data, but our web server does not support keep-alive and sends data. This is because it cannot be received normally.

Firefox will send small data in one request, so you can receive the data normally.

Below is a screen that confirms the behavior with Firefox, but if you have trouble installing Firefox, please check the operation ** without uploading the file in Chrome. Any form other than a file, such as a text form, should receive the data.

The first thing to notice is that each item in the form data is separated by a special separator. (In this case, the separator is ---------------------------10847194838586372301567045317)

Continue with Book!

Chapter "Being able to handle POST parameters"