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.
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.
Before we talk about it, let's start by observing how the request body is actually used.
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.
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 code
and 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.
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,
name
and value
with =
&
+
for half-width spacesUTF-8
and the byte string is represented by% XX
.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.
** 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
)
Chapter "Being able to handle POST parameters"
Recommended Posts