Common methods for submitting post and post php ajax data

Below is a standard ajax request code. Normally there will be no problems,... In specific circumstances, problems may occur. For example, when username = fdas & 321, or the & symbol appears in the parameter value, in order to find this problem, I read the http header information in N multilateral, because it is only about one side, and the data is transmitted, but the printed data is half-cut, finally, observe the header information carefully and find that the transmitted header is incorrect. The problem is located on js, this problem occurs when the string is concatenated. username = fdas & 321 & password = password is incorrect. So we need to convert the transmitted data into {username: username, passsword: password} to avoid this! Suffering for one night !!!

The code is as follows:	Copy code
$ (". Submit"). bind ('click', function (){ Var username = $ ("input [name = 'username']"). val (); $. Ajax ({ Url: "post ", Type: "post ", DataType: "json ", Data: "username =" + username + "& password =" + password, Timeout: 5000, Error: function (){ Alert (1) }, Success: function (){ } }) })

Four common POST data submission methods

Application/x-www-form-urlencoded

This should be the most common way to submit data through POST. If the native form of the browser does not set the enctype attribute, data will be submitted in application/x-www-form-urlencoded mode. The request is similar to the following (unrelated request headers are omitted in this article ):

The code is as follows:	Copy code
POST http://www.111cn.net 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, Content-Type is specified as application/x-www-form-urlencoded. Second, the submitted data is encoded in key1 = val1 & key2 = val2, both key and val are URL transcoded. Most server languages support this method. For example, in PHP, $ _ POST ['title'] can get the title value, and $ _ POST ['sub'] can get the sub array.

This method is often used when Ajax is used to submit data. For example, for 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 also a common POST data submission method. When we use a form to upload a file, we must make the form's enctyped equal to this value. Let's look at a request example:

The code is as follows:

Copy code

POST http://www.111cn.net 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 complicated. First, a boundary is generated to separate different fields. To avoid duplication with the body content, boundary is very long and complex. Content-Type indicates that the data is encoded by mutipart/form-data. What is the boundary of this request. The message body is divided into similar parts according to the number of fields. Each part starts with -- boundary, followed by the content description, followed by the carriage return, finally, the specific content of the field (text or binary ). If a file is transmitted, it also contains the file name and file type information. The message subject ends with the -- boundary -- mark. For detailed definitions of mutipart/form-data, go to rfc1867.

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

The two POST data methods mentioned above are both supported by the browser native, and currently the native form only supports these two methods. However, as more and more Web sites, especially webapps, use Ajax for data interaction, we can define new data submission methods to facilitate development.

Application/json

The Content-Type of application/json is the response header. In fact, more and more people use it as the request header to tell the server that the message subject is a serialized JSON string. Due to the popularity of JSON specifications, all major browsers except earlier versions of IE support JSON. stringify native, and the server language also has functions for processing JSON, so there is no trouble in using JSON.

JSON format supports more complex structured data than key-value pairs, which is also useful. I remember that when I was working on a project a few years ago, I had to submit a very deep data hierarchy. I just submitted the data after JSON serialization. However, at that time, I used the JSON string as the val and put it in the key-value pair and submitted it in x-www-form-urlencoded mode.

The Ajax function in AngularJS of Google submits JSON strings by default. For example, the following code:

The code is as follows:	Copy code
Var data = {'Title': 'test', 'sub ': [1, 2, 3]}; $ Http. post (url, data). success (function (result ){ ... });

The final request is:

POST http://www.111cn.net HTTP/1.1
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. All major packet capture tools, such as Chrome's developer tools, Firebug, and Fiddler, will display JSON data in a tree structure, which is very friendly. However, some server languages do not 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 by yourself: when the Content-Type in the request header is application/json, get the original input stream from php: // input, and then json_decode the object. Some php frameworks have already started to do this.

Of course, AngularJS can also be configured to use x-www-form-urlencoded to submit data. If necessary, refer to this article.

Text/xml

My blog mentioned XML-RPC (XML Remote Procedure Call) before ). It is a remote call specification that uses HTTP as the transmission protocol and XML as the encoding method. A typical XML-RPC request is like this:

The code is as follows:	Copy code
POST http://www.111cn.net 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 protocol is simple, the function is enough, the realization of various languages have. It is also widely used, such as WordPress XML-RPC Api, seo/seo.html "target =" _ blank "> Search engine ping service and so on. In JavaScript, there are also ready-made libraries to support data interaction in this way, can well support the existing XML-RPC services. However, I personally think the XML structure is too bloated, and JSON is more flexible and convenient in general scenarios.