1. General

The FormData type is actually defined at XMLHttpRequest Level 2. It facilitates the serialization of tables and the creation of data in the same format as the form (for XHR transmission, of course).

2. Constructor

There are several ways to create a formData object instance

1. Create an empty object instance

var formData = new FormData();

At this point, you can call the append() method to add data

2. Use an existing form to initialize an object instance

Suppose the page already has a form

<form id="myForm" action="" method="post">
    <input type="text" name="name">name
    <input type="password" name="psw">password
    <input type="submit" value="Submit">
</form>

We can use this form element as an initialization parameter to instantiate a formData object

// Get an existing page form form 
var form = document.getElementById("myForm");
// Initialize with form
var formData = new FormData(form);
// We can according to name To access the fields in the form
var name = formData.get("name"); // Get name
var psw = formData.get("psw"); // Get password
// Of course, you can also add other data on this basis
formData.append("token","kshdfiwi3rh");

3. Operation method

First, we should clarify the data form stored in formData. A pair of keys / values form a piece of data. The key is unique, and a key may correspond to multiple values. If form initialization is used, each form field corresponds to a piece of data, their HTML name attribute is the key value, and their value attribute corresponds to the value value.

 

 

3.1 get value

We can get the corresponding value through get(key)/getAll(key),

formData.get("name"); // obtain key by name First value of
formData.get("name"); // Returns an array that gets key by name All values of

3.2 adding data

We can add data through append(key, value). If the specified key does not exist, a new piece of data will be added. If the key exists, it will be added to the end of the data

 

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");

formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v1"]

3.3 setting and modifying data

We can set and modify data through set(key, value). If the specified key does not exist, a new one will be added. If it does exist, the corresponding value value will be modified.

formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

3.4 judge whether the data

We can use has(key) to determine the corresponding key value

formData.append("k1", "v1");
formData.append("k2",null);

formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false

3.5 deleting data

delete(key) to delete data

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1");

formData.getAll("k1"); // []

3.6 traversal

We can get an iterator through entries(), and then traverse all the data,

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");

var i = formData.entries();

i.next(); // {done:false, value:["k1", "v1"]}
i.next(); // {done:fase, value:["k1", "v2"]}
i.next(); // {done:fase, value:["k2", "v1"]}
i.next(); // {done:true, value:undefined}

You can see the rules for returning iterators

1. Each call to next() returns a piece of data, and the order of data is determined by the order of addition

2. The returned object is an object. When its done attribute is true, it indicates that all data has been traversed. This can also be used as the basis for judgment

3. The value attribute of the returned object stores a pair of key / values in the form of an array. The array subscript 0 is the key and subscript 1 is the value. If a key value corresponds to multiple values, it will become multiple pairs of key / values

We can also get only the value value through the values() method

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k2", "v1");

var i = formData.values();

i.next(); // {done:false, value:"v1"}
i.next(); // {done:fase, value:"v2"}
i.next(); // {done:fase, value:"v1"}
i.next(); // {done:true, value:undefined}

4. Send data

We can send data through xhr

var xhr = new XMLHttpRequest();
xhr.open("post","login");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(formData);

This method can realize the asynchronous upload of files.