Home >Web Front-end >JS Tutorial >Four common ways to submit data via POST
Four common POST data submission methods
We know that the HTTP protocol is transmitted in ASCII code and is an application layer specification based on the TCP/IP protocol. The specification divides HTTP requests into three parts: status line, request headers, and message body. Similar to the following:
<method> <request-url> <version><headers> <entity-body></entity-body></headers></version></request-url></method>
The protocol stipulates that the data submitted by POST must be placed in the message body (entity-body), but the protocol does not specify what encoding method the data must use. In fact, developers can decide the format of the message body by themselves, as long as the last HTTP request sent meets the above format.
However, before the data is sent out, it only makes sense if the server parses it successfully. General server-side languages such as php, python, etc., and their frameworks have built-in functions for automatically parsing common data formats. The server usually learns how the message body in the request is encoded based on the Content-Type field in the request headers, and then parses the body. So when it comes to POST submission data scheme, it includes two parts: Content-Type and message body encoding method. Let’s officially start introducing them.
application/x-www-form-urlencoded
This should be the most common way to submit data via POST. For the browser's native form, if the enctype attribute is not set, data will eventually be submitted in application/x-www-form-urlencoded mode. The request is similar to the following (irrelevant request headers are omitted in this article):
Content-Type: application/x-www-form-urlencoded;charset=utf-8 title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3
First, the Content-Type is specified as application/x-www-form-urlencoded; secondly, the submitted data is in accordance with Key1=val1&key2=val2 is encoded, and both key and val are URL transcoded. Most server-side languages have good support for this method. For example, in PHP, $_POST[‘title’] can get the value of title, and $_POST[‘sub’] can get the sub array.
Many times, we also use this method when submitting data using Ajax. For example, the Ajax of jquery and QWrap, the default value of Content-Type is "application/x-www-form-urlencoded;charset=utf-8".
multipart/form-data
This is another common way to submit POST data. When we use a form to upload files, the enctyped of the form must be equal to this value. Let’s look directly at a request example:
Content-Type:multipart/form-data; boundary=—-WebKitFormBoundaryrGKCBY7qhFd3TrwA ——WebKitFormBoundaryrGKCBY7qhFd3TrwAContent-Disposition: form-data; name=”text” title——WebKitFormBoundaryrGKCBY7qhFd3TrwAContent-Disposition: form-data; name=”file”; filename=”chrome.png”Content-Type: image/png PNG … content of chrome.png …——WebKitFormBoundaryrGKCBY7qhFd3TrwA–
This example is a little more complicated. First, a boundary is generated to separate different fields. In order to avoid duplication with the text content, the boundary is very long and complicated. Then Content-Type specifies that the data is encoded with mutipart/form-data, and what is the boundary content of this request. The message body is divided into multiple parts with similar structure according to the number of fields. Each part starts with –boundary, followed by content description information, followed by carriage return, and finally the specific content of the field (text or binary). If a file is being transferred, also include the file name and file type information. The message body ends with the –boundary– flag. For a detailed definition of mutipart/form-data, please go to rfc1867.
This method is generally used to upload files, and major server languages also have good support for it.
The two POST data methods mentioned above are natively supported by browsers, and the current native form only supports these two methods. But as more and more Web sites, especially WebApps, all use Ajax for data interaction, we can completely define new data submission methods to bring more convenience to development.
application/json
application/json This Content-Type is certainly familiar to everyone as a response header. In fact, more and more people now use it as a request header to tell the server that the message body is a serialized JSON string. Due to the popularity of the JSON specification, all major browsers except lower versions of IE natively support JSON.stringify, and server-side languages also have functions for processing JSON. You will not encounter any trouble when using JSON.
It is also useful that the JSON format supports much more complex structured data than key-value pairs. I remember that when I was working on a project a few years ago, the data that needed to be submitted had a very deep level. I serialized the data into JSON and submitted it. But at that time, I used the JSON string as val, still placed it in the key-value pair, and submitted it in x-www-form-urlencoded mode.
Google 的 AngularJS 中的 Ajax 功能,默认就是提交 JSON 字符串。例如下面这段代码: var data = {‘title':’test’, ‘sub’ : [1,2,3]};$http.post(url, data).success(function(result) { …});
The final request sent is:
Content-Type: application/json;charset=utf-8 {“title”:”test”,”sub”:[1,2,3]}
This solution can easily submit complex structured data and is especially suitable for RESTful interfaces. Major packet capture tools, such as Chrome's own developer tools, Firebug, and Fiddler, will display JSON data in a tree structure, which is very friendly. However, some server-side languages do not yet support this method. For example, php cannot obtain content from the above request through the $_POST object. At this time, you need to handle it yourself: when the Content-Type in the request header is application/json, obtain the original input stream from php://input, and then json_decode it into an object. Some PHP frameworks have already started doing this.
当然 AngularJS 也可以配置为使用 x-www-form-urlencoded 方式提交数据。如有需要,可以参考这篇文章。
text/xml
我的博客之前提到过 XML-RPC(XML Remote Procedure Call)。它是一种使用 HTTP 作为传输协议,XML 作为编码方式的远程调用规范。典型的 XML-RPC 请求是这样的:
Content-Type: text/xml <!–?xml version=”1.0″?–><methodcall> <methodname>examples.getStateName</methodname> <params> <param> <value><i4>41</i4></value> </params></methodcall>
XML-RPC 协议简单、功能够用,各种语言的实现都有。它的使用也很广泛,如 WordPress 的 XML-RPC Api,搜索引擎的 ping 服务等等。JavaScript 中,也有现成的库支持以这种方式进行数据交互,能很好的支持已有的 XML-RPC 服务。不过,我个人觉得 XML 结构还是过于臃肿,一般场景用 JSON 会更灵活方便。
The above is the detailed content of Four common ways to submit data via POST. For more information, please follow other related articles on the PHP Chinese website!