foreword
Everyone knows that when the front-end interacts with the background, it is inevitable to pass parameters. Generally, params are used in get requests, but in post requests, we have two common ways to pass parameters: JSON object format and formData format, but some scenarios require us to convert these two data formats, such as form submission, some data are in JSON object format, some are in FormData format, and we need to convert them at this time.
Common POST data submission methods
1. application/x-www-form-urlencoded
Submit data in the form format formthrough actionthe attribute of the tag. If enctypethe attribute , application/x-www-form-urlencodedthe data will be submitted in the form of finally.
2. multipart/form-data
This is also a common way of submitting postdata . When we use the form to upload files, we must make formthe of enctypeequal to this value, which is mostly used for file uploads.
3. application/json
application/jsonEveryone is familiar with this Content-Typeas a response header. Objectively speaking, more and more people now use it as a request header to tell the server that the message body is a serialized jsonstring. Due to the popularity of jsonthe specification , IEall major browsers except the low version support natively JSON.stringify, and the server-side language also has functions jsonto json, so you will not encounter any trouble when using , and jsonthe format supports more complex structures than key-value pairs data.
4. text/xml
In contrast json, xmlit is not better for data exchange, it contains too much packaging, and it does not match the data model of most programming languages, it is xmldata-oriented, jsonobject-oriented and structure-oriented. At present, it is mostly used for XMLstoring data, storing configuration files, etc. where structured storage is required.
The difference between JSON format and formData format
JSON request header:
JSON payload:
formData request header:
formData load:
From the above pictures, we can roughly understand that the front-end transmits binary data, and the two content-typeare different. jsonWe have already serialized, but formdatastill need to be processed.
Two formats of formdata
multipart/form-data: It can not only upload binary data such as files, but also upload form key-value pairs, but it will be converted into a message in the end;x-www-form-urlencoded: Only key-value pairs can be uploaded, and the key-value pairs are separated by intervals.
json object to formData
Convert one by one
let obj = {
id: "001",
name: "小蓝",
age: "18",
sex: "女",
};
const formData = new FormData();
formData.append("id", obj.id);
formData.append("name", obj.name);
formData.append("age", obj.age);
formData.append("sex", obj.sex);
console.log(formData);
All property value conversions
let obj = {
id: "001",
name: "小蓝",
age: "18",
sex: "女",
};
const formData = new FormData();
Object.keys(obj).map((key) => {
formData.append(key, obj[key]);
});
console.log(formData);
formData object to json
var jsonObj = {
};
formData.forEach((value, key) => (jsonObj[key] = value));