Summary of differences between data submission type request payload and form data

The outline

1. What is? `Request Payload`, What is? `Form Data`
2. Different `Content-Type` Corresponding to different submission methods 
3. summary 

graphics ：

1. What is? Request Payload, What is? Form Data

Request Payload （http Request body mode ）
Form Data （ Form request body mode ）

Request Payload Corresponding ：

Content-Type：application/json

Form Data Corresponding ：

Content-Type: application/x-www-form-urlencoded
 and 
Content-Type: multipart/form-data

remarks ： Forms （POST request ） The coding

<form action="/xxxx" method="get" enctype="application/x-www-form-urlencoded">
<form action="/xxxx" method="get" enctype="multipart/form-data">
<form action="/xxxx" method="get" enctype="text/plain">

type	meaning
application/x-www-form-urlencoded	Default encoding , Encode data into key value pairs
multipart/form-data	Upload form file
text/plain	String type , Data acquisition method getInputStream

2. Different Content-Type Corresponding to different submission methods

General types in data transmission are only 3 Kind of
1.Content-Type: text/plain
2.Content-Type: application/x-www-form-urlencoded
3.Content-Type: application/json

• Tradition ajax Request mode

  Content-Type：text/plain

function submit2() {
    
    var xhr = new XMLHttpRequest();
    xhr.timeout = 3000;
    var obj = {
    a: 1, b: 2};
    xhr.open('POST', '/');
    xhr.send(obj);
}

Need to pass through xhr.send(JSON.stringify(obj)) Modify to string and transfer .

Content-Type: text/plain
Request Payload:  # character string 

• axios The way request

  Content-Type：application/json and Content-Type: application/x-www-form-urlencoded

function submit3() {
    
    var sence1 = 'name=123&val=456';
    var sence2 = {
    name: 123, val: 456};
    axios.post('/', sence1)
}

#  Request data is “ character ” when ：
Content-Type: application/x-www-form-urlencoded
Form Data:  #name=123&val=456

#  Request data is “ object ” when ：
Content-Type：application/json
Request Payload:  #{name:123,vla:456}

• Form Forms Submit

<form action="/" method="POST">
    <input name="name" type="text">
    <input name="password" type="text">
    <button> Submit </button>
</form>

Content-Type: application/x-www-form-urlencoded
Form Data： # name='xxx'&password='yyy'

3. summary

Content-Type The difference of

Pattern	type
ajax	Content-Type The default is “ Text ” type
form Submit	Content-Type The default is “Form” type
axios Pass string	Content-Type The default is “Form” type
axios Transfer object	Content-Type The default is “JSON” type