Preface
Recently, I found that although the form form is often used to submit data, it is still a little vague, such as: What is the difference between post and put, application/x-www-form-urlencoded and multipart/form-data, and why it can only be uploaded by mutipart/form-data file; so thought I’d spend some time digging through it
Post And Put
When it comes to data transmission, the most common ones are the post and put methods in the http request, both of which are sent to the serverSend data to operate the resources of server; such as very common operations such as creating users and modifying user information; what is the difference between them?
The biggest difference between post and put is that the put operation is idempotent, that is, the result is the same no matter how many times you operate; and post is not idempotent, and the operation of post is to create resources on the server; for example: to create a user, if the operation is performed twice, an error will be reported: “user already exist” , and multiple put operations on user will have the same result (generally, the idempotence of patch is not mandatory)
Post Content-Type
We often use the Post method in the HTTP protocol to submit data to the server to implement the operation on the specified resource; and it will be in the Header of the request Use the Content-Type field to specify the data type to be transmitted; after receiving the request, the server receives the data sent by the client according to the Content-Type, and then implements the corresponding logic
In a http request, there are three common ways to send data using the Post method as follows Content-Type:
application/x-www-form-urlencodedmultipart/form-datatext/plain
Different Content-Type represents different data representation forms, and the way the server receives them will be different. Let’s discuss the ways in detail below.
Content-Type: application/x-www-form-urlencoded
This is the default type when the form submits data. The submitted data is in the request body, and the format is a key-value pair separated by & amp;, as follows:
key1=val1 &key2=value2
If there are non-alphabets in key or value, the numeric characters will URL-encode it, which is why it is not suitable for transmitting binary data.
The following is an example of sending a request using this type. The front-end code is as follows:
<body> ? ?<form action="test.php" method="post"> ? ? ?<input type="text" name="name" placeholder="Name"> ? ? ?<input type="text" name="email" placeholder="Email"> ? ? ?<input type="submit" name="submit" value="Submit"> </form> </body>
We use the Post method to send the username and email address to the server. The following is the sent request body:
POST / HTTP/1.1 Host: www.example.com Content-Type: application/x-www-form-urlencoded Content-Length: 17 ? name=admin & amp;[email protected]
In the above example, it can be seen that if the sent data contains non-alphanumeric characters, it will be escaped; its data transmission method is very similar to that of query parameters. If you use the post method, these The data is transmitted in the request body, and if the get method is used, then these parameters will be transmitted as query parameters, as follows:
http://www.example.com?name=admin & amp;[email protected]
The encoding methods of the transmission parameters are the same, except that one is in Body and the other is in url
Content-Type: multipart/form-data
This is also a way to submit data through the form, but the body of the transmitted data is different from the application/x-www-form-urlencoded; multipart/ form-data is to divide the data to be transmitted into multiple parts, each part as a separate data block, and specify the Content-Type of the data to be transmitted in this part, every two data A separator is used to distinguish between blocks (the separator is specified by the requester)
Let’s take an example to see how the data of multipart/form-data is sent and the specific format; the front-end code is as follows:
<form action="test.php" method="post" enctype="multipart/form-data"> ? ?<input type="file" name="file" /> ? ?<input type="text" name="username" /> ? ?<input type="submit" value="Upload" /> </form>
The following is the request body sent,
POST / HTTP/1.1 Host: www.example.ai Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryQa8xYdWftN9gXLbb Content-Length: 560 ? ------WebKitFormBoundaryQa8xYdWftN9gXLbb Content-Disposition: form-data; name="file"; filename="test.txt" Content-Type: application/octet-stream ? <test.txt> ? ------WebKitFormBoundaryQa8xYdWftN9gXLbb Content-Disposition: form-data; name="username" ? admin ------WebKitFormBoundaryQa8xYdWftN9gXLbb--
Each part of the request is separated by boundary, and the Content-Type in the Header of the request will tell the server the content of the request The request body is divided into multiple parts (multipart), and the boundary between each two parts is ----WebKitFormBoundaryQa8xYdWftN9gXLbb, so that the server takes After reaching the body, you will know how to advance the data
multipart/form-data is more suitable for sending binary data to the server, so this type is often used when sending files to the server; and if you just submit key/value to the server value, it is not recommended to use this method, because its boundary will increase the network load
Content-Type: text/plain
text/plain indicates that the content sent by the client is in plain text format, that is to say, it is a kind of unformatted content. After receiving the data, the server needs to make corresponding conversions to adapt to its own program; for example:
POST /text HTTP/1.1 Content-Type: text/plain User-Agent: PostmanRuntime/7.28.3 Accept: */* Host: localhost:8080 Accept-Encoding: gzip, deflate, br Connection: keep-alive Content-Length: 15 This is a test!
Of course, there are also many extended formats based on text/plain, such as: text/html identifies the file as a html file, and the browser After receiving it, it will be parsed according to the html format. text/xml is the xml file format. After receiving the data, it can be parsed according to the text/xml format. code>xml format to parse
The difference between
text/xmlandapplication/xmlis thattext/xmlignores the encoding in thexmlfile header Setting, the default encoding isus-ascii, andapplication/xmlwill follow the encoding setting in thexmlfile header
There are other text formats, such as the more commonly used ones: application/json, application/yaml, etc.
End
In the post request, you can also transmit any data type in the Body through methods like XMLHttpRequest; no matter what the method is, you need to negotiate with the server , which tells the server what to do with
Reference: developer.mozilla.org/en-US/docs/…