How to use FormData

There are two main uses of FormData:

1. Combine the name and value of form elements to realize the serialization of form data, so as to reduce the splicing of form elements and improve work efficiency.

2. Upload files asynchronously

1, Create formData object

1. Create an empty object:

//Create an empty object through the FormData constructor
var formdata=new FormData();
//You can append data through the append() method
formdata.append("name","laotie");
//Read the value through the get method
console.log(formdata.get("name"));//laotie
//Set the value through the set method
formdata.set("name","laoliu");
console.log(formdata.get("name"));//laoliu

2. Initialization of formData through forms

To create a form:

<form id="advForm">
    <p>Advertisement Name:<input type="text" name="advName"  value="xixi"></p>
    <p>Advertising category:<select name="advType">
        <option value="1">Rotation chart</option>
        <option value="2">Advertisement at the bottom of the carousel</option>
        <option value="3">Popular recycled ads</option>
        <option value="4">Excellent product selection advertisement</option>
    </select></p>
    <p><input type="button" id="btn" value="Add to"></p>
</form>

Form elements are used as parameters to initialize formData

//Get form button elements
var btn=document.querySelector("#btn");
//Add click event for button
btn.onclick=function(){
    //Get the form element in the page according to the ID
    var form=document.querySelector("#advForm");
    //Initialize formData with the obtained form elements as parameters
    var formdata=new FormData(form);
    //Get the value value of the element whose name is advName through get method
    console.log(formdata.get("advName"));//xixi
    //Get the value value of the element whose name is advType through get method
    console.log(formdata.get("advType"));//1 
}

2, Operation method

1. get(key) and getAll(key) to get the corresponding value

// Get the first value with key as age
formdata.get("age"); 
 // Get all values with key as age and return value as array type
formdata.getAll("age");

2. append(key,value) to append data at the end of data

//Create an empty object through the FormData constructor
var formdata=new FormData();
//Append the data whose key is name and value is laoliu at the end through append() method
formdata.append("name","laoliu");
//Append the data whose key is name and value is laoli at the end through append() method
formdata.append("name","laoli");
//Append the data whose key is name and value is laotie at the end through append() method
formdata.append("name","laotie");
//Read the first value whose key is name through get method
console.log(formdata.get("name"));//laoliu
//Read all the values whose key is name through getAll method
console.log(formdata.getAll("name"));//["laoliu", "laoli", "laotie"]

3. set(key, value) to modify data

The value of key does not exist. A piece of data will be added

//Create an empty object through the FormData constructor
var formdata=new FormData();
//If the value of key does not exist, a data with key as name and laoliu will be added to the data
formdata.set("name","laoli");
//Read the first value whose key is name through get method
console.log(formdata.get("name"));//laoli

The value of key exists, and the corresponding value will be modified

//Create an empty object through the FormData constructor
var formdata=new FormData();
//Append the data whose key is name and value is laoliu at the end through append() method
formdata.append("name","laoliu");
//Append the data whose key is name and value is laoliu2 at the end through the append() method
formdata.append("name","laoliu2");
//Read the first value whose key is name through get method
console.log(formdata.get("name"));//laoliu
//Read all the values whose key is name through getAll method
console.log(formdata.getAll("name"));//["laoliu", "laoliu2"]

//Change the existing value with key as name to laoli
formdata.set("name","laoli");
//Read the first value whose key is name through get method
console.log(formdata.get("name"));//laoli
//Read all the values whose key is name through getAll method
console.log(formdata.getAll("name"));//["laoli"]

4. Judge whether there is corresponding key value through has(key)

//Create an empty object with the FormData constructor
var formdata=new FormData();
//Append the data whose key is name and value is laoliu at the end through append() method
formdata.append("name","laoliu");
//Determine whether the data with key as name is included
console.log(formdata.has("name"));//true
//Determine whether data with key age is included
console.log(formdata.has("age"));//false

5. Data can be deleted through delete(key)

//Create an empty object through the FormData constructor
var formdata=new FormData();
//Append the data whose key is name and value is laoliu at the end through append() method
formdata.append("name","laoliu");
console.log(formdata.get("name"));//laoliu
//Delete the value with key as name
formdata.delete("name");
console.log(formdata.get("name"));//null

3, Sending data through XMLHttpRequest