How to submit data using post in HTML

The HTTP request methods specified by the HTTP/1.1 protocol include OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, and CONNECT. Among them, POST is generally used to submit data to the server. This article mainly discusses several ways of submitting data through POST.

The HTTP request methods specified by the HTTP/1.1 protocol include OPTIONS, GET, HEAD, POST, PUT, DELETE, and TRACE. , CONNECT these types. POST is generally used to submit data to the server. This article mainly discusses several ways to submit data through POST.

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 completely 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 Java 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):

POST http://www.example.com HTTP/1.1
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, 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, in JQuery's Ajax, the default value of Content-Type is "application/x-www-form-urlencoded;charset=utf-8".

multipart/form-data

This is another common POST data submission method. 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:

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"
title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-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, the file name and file type information must also be included. The message body ends with the --boundary-- flag. For the detailed definition of mutipart/form-data, please go to rfc1867 to view.

This method is generally used to upload files, and major server languages ​​also have good support for it.

The two methods of POST data mentioned above are natively supported by browsers, and at this stage, native forms only support 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.

The Ajax function in Google's AngularJS submits a JSON string by default. For example, the following code:

var data = {'title':'test', 'sub' : [1,2,3]};
$http.post(url, data).success(function(result) {
...
});

The final request sent is:

POST http://www.example.com HTTP/1.1
Content-Type: application/json;charset=utf-8
{"title":"test","sub":[1,2,3]}

这种方案，可以方便的提交复杂的结构化数据，特别适合 RESTful 的接口。各大抓包工具如 Chrome 自带的开发者工具、Firebug、Fiddler，都会以树形结构展示 JSON 数据，非常友好。但也有些服务端语言还没有支持这种方式，例如 php 就无法通过 $_POST 对象从上面的请求中获得内容。这时候，需要自己动手处理下：在请求头中 Content-Type 为 application/json 时，从 php://input 里获得原始输入流，再 json_decode 成对象。一些 Java 框架已经开始这么做了。

当然 AngularJS 也可以配置为使用 x-www-form-urlencoded 方式提交数据。

text/xml

XML-RPC（XML Remote Procedure Call）。它是一种使用 HTTP 作为传输协议，XML 作为编码方式的远程调用规范。典型的 XML-RPC 请求是这样的：
POST http://www.example.com HTTP/1.1
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 会更灵活方便。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

相关推荐：

php ajax提交post请求出现数组被截断情况的解决方法

Android+PHP 使用HttpClient提交POST的请求，使用JSON解析响应

php提交post数组参数实例分析

The above is the detailed content of How to submit data using post in HTML. For more information, please follow other related articles on the PHP Chinese website!