Home > Developer > Web Develop
What is the difference between request payload and FormData in HTTP requests?
Formdata and payload are two formats that the browser transmits to the interface, both of which are differentiated by content-type (understanding Content-type), if application/ x-www-form-urlencoded words, then the Formdata way, if it is Application/json or multipart/form-data, then request payload
the way .
For example, the following code that uses AJAX to submit a POST request (using application/x-www-form-urlencoded encoding by default):
<!DOCTYPE HTML><HTML><Head> <title></title> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "Width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <Scripttype= "Text/javascript"src= "Https://tugenhua0707.github.io/html5UploadImage/js/jquery.js"></Script></Head><Body> <DivID= "App"> <Divclass= "BTN">Send a POST request</Div> </Div> <Script> varobj= { "name": 'Cntchen', "Info": 'Front-End', }; $('. BTN'). Click (function() {$.ajax ({URL:'www.example.com', type:'POST', DataType:'JSON', Data:obj, success:function(d) {}}); </Script></Body></HTML>
As shown in the following:
2. Uploading files using the Multipart/form-data form
The following HTML code:
<!DOCTYPE HTML><HTML><Head> <title></title> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "Width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"></Head><Body> <DivID= "App"> <formAction= "http://www.example.com"Method= "POST"enctype= "Multipart/form-data"> <P>Username<inputtype= "text"name= "FName" /></P> <P>Age<inputtype= "text"name= "Age" /></P> <inputtype= "Submit"value= "Submit" /> </form> </Div></Body></HTML>
As shown in the following:
You can see that the Request Payload format is used when uploading a file using the Multipart/form-data form;
3. Using Content-type:application/json to encode
The following HTML code:
<!DOCTYPE HTML><HTML><Head> <title></title> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "Width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <Scripttype= "Text/javascript"src= "Https://tugenhua0707.github.io/html5UploadImage/js/jquery.js"></Script></Head><Body> <DivID= "App"> <Divclass= "BTN">Send a POST request</Div> </Div> <Script> $('. BTN'). Click (function() {$.ajax ({URL:'Http://localhost:8081/api.json', type:'POST', DataType:'JSON', ContentType:'Application/json', Data:JSON.stringify ({a: [{b:1, A:1}]}), success:function(d) {}}); </Script></Body></HTML>
As shown
What is the difference between request payload and FormData in HTTP requests?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
