Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

Php adopts the common methods of submitting ajax data to post and post

2025-03-30 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

This article focuses on "php uses ajax data to submit post and post common methods", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "php uses ajax data to submit post and post common methods" it!

In many cases, we will have no problem using ajax, but sometimes we will encounter the problem of incomplete post submission of ajax data. Here is an example to analyze it.

The following is a standard ajax request code, normally there will be no problems, however, there will be problems under certain circumstances, for example, in the case of username=fdas&321, or the & symbol appears in the parameter value. After N times of testing, it is found that the data has been transmitted, but the printed data is half. Finally, a closer look at the header information shows that the head of the transmission is incorrect, and the problem is located on the js. It is wrong to find that the way strings are concatenated can cause this problem, username=fdas&321&password=password. So we need to change the transferred data into {username:username,passsword:password} this json format to avoid the problem!

The sample code is as follows:

The copy code is as follows:

$(".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 () {

}

})

})

Add: four common ways for POST to submit data

① application/x-www-form-urlencoded

This is probably the most common way for POST to submit data. The browser's native form form, if you do not set the enctype property, will eventually submit the data as application/x-www-form-urlencoded. The request looks like this (extraneous request headers are omitted in this article):

The copy code is as follows:

POST https://www.jb51.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 designated as application/x-www-form-urlencoded;. Secondly, the submitted data is encoded in the way of key1=val1&key2=val2, and both key and val are transcoded by URL. Most server-side languages support this approach very well. For example, in PHP, $_ POST ['title'] can get the value of title, and $_ POST [' sub'] can get the sub array.

Most of the time, we also use this method when we submit data using Ajax. For example, the Ajax,Content-Type default value for both JQuery and QWrap is "application/x-www-form-urlencoded;charset=utf-8".

② multipart/form-data

This is another common way of submitting POST data. When we use the form to upload files, we have to make the enctyped of form equal to this value. Let's look directly at an example of a request:

The copy code is as follows:

POST https://www.jb51.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 more complicated. First, a boundary is generated to split different fields, and the boundary is long and complex to avoid repetition with the body content. Then the Content-Type indicates that the data is encoded in mutipart/form-data, and what is the content of the boundary of this request. According to the number of fields, the message body is divided into several parts with similar structure. Each part starts with-- boundary, followed by content description information, then enter, and finally the specific content of the field (text or binary). If you are transferring a file, also include the file name and file type information. The message body ends with-- boundary--. For a detailed definition of mutipart/form-data, please go to rfc1867.

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

The two ways of POST data mentioned above are natively supported by browsers, and native form forms only support these two ways at this stage. But as more and more Web sites, especially WebApp, all use Ajax for data interaction, we can define new ways to submit data, bringing more convenience to development.

③ application/json

You must be familiar with the Content-Type of application/json 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 the lower version of IE natively support JSON.stringify, and server languages also have functions to deal with JSON, so there will be no trouble using JSON.

It is also useful that the JSON format supports structured data that is much more complex than key-value pairs. I remember that when I was working on a project a few years ago, the data I needed to submit was very deep. I serialized the data JSON and then submitted it. However, at that time, I used the JSON string as a val, which was still placed in the key-value pair and submitted as x-www-form-urlencoded.

The default Ajax function in Google's AngularJS is to submit JSON strings. For example, the following code:

The copy code is as follows:

Var data = {'title':'test',' sub': [1je 2jue 3]}

$http.post (url, data) .success (function (result) {

...

});

The final request sent is:

The copy code is as follows:

POST https://www.jb51.net HTTP/1.1

Content-Type: application/json;charset=utf-8

{"title": "test", "sub": [1, 2, 3]}

This scheme can easily submit complex structured data and is especially suitable for the interface of RESTful. All the major package grabbing tools, such as Chrome's own developer tools, Firebug, Fiddler, will display JSON data in a tree structure, which is very friendly. However, there are some server-side languages that do not support this approach. For example, php cannot get content from the above request through the $_ POST object. At this point, you need to do it yourself: when Content-Type is application/json in the request header, get the original input stream from php://input, and then json_decode it into an object. Some php frameworks are already starting to do this.

Of course, AngularJS can also be configured to submit data using x-www-form-urlencoded.

④ text/xml

XML-RPC (XML Remote Procedure Call) was mentioned earlier. It is a remote invocation specification that uses HTTP as the transport protocol and XML as the encoding method. A typical XML-RPC request looks like this:

The copy code is as follows:

POST https://www.jb51.net HTTP/1.1

Content-Type: text/xml

Examples.getStateName

forty-one

XML-RPC is simple and functional, and it can be implemented in all kinds of languages. It is also widely used, such as WordPress's XML-RPC Api,seo/seo.html "target=" _ blank "> search engine ping service and so on. In JavaScript, there are also ready-made libraries that support data exchange in this way, which can well support existing XML-RPC services. However, I personally think that the XML structure is still too bloated, and it will be more flexible and convenient to use JSON in general scenarios.

At this point, I believe that "php uses ajax data to submit post and post common methods" have a deeper understanding, might as well to practical operation it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report