Detailed Explanation of FormData in System Learning Front End

FormData

1 Overview

The FormData type is actually defined at XMLHttpRequest level 2, which facilitates serializing tables and creating data in the same format as the form (for XHR transport, of course).

2. Constructor

There are several ways to create an instance of a formData object

1. Create an 空对象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

If the page already has a form

<form id="myForm" action="" method="post">    <input type="text" name="name">名字    <input type="password" name="psw">密码    <input type="submit" value="提交"></form>

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

// 获取页面已有的一个form表单var form = document.getElementById("myForm");// 用表单来初始化var formData = new FormData(form);// 我们可以根据name来访问表单中的字段var name = formData.get("name"); // 获取名字var psw = formData.get("psw"); // 获取密码// 当然也可以在此基础上，添加其他数据formData.append("token","kshdfiwi3rh");

3. How to operate

First, we need to clarify the form of data stored in formData. A pair of key/value constitutes a piece of data. The key is unique, and a key may correspond to multiple values. If the form is initialized, 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.

key	value
k1	[v1,v2,v3]
k2	v4

3.1 Get the value

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

formData.get("name"); // 获取key为name的第一个值formData.get("name"); // 返回一个数组，获取key为name的所有值

3.2 Add data

We can add data by 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 the data through set(key, value). If the specified key does not exist, a new one will be added. If it exists, the corresponding value will be modified.

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

3.4 Determine whether the data

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

formData.append("k1", "v1");formData.append("k2",null);formData.has("k1"); // trueformData.has("k2"); // trueformData.has("k3"); // false

3.5 Deleting data

Delete data by delete(key)

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, the order of which is determined by the order of addition

2. What is returned is an object. When its done attribute is true, it means that all the 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/value in the form of an array. The subscript 0 of the array is the key, and the subscript 1 is the value. If a key value corresponds to multiple values, it will become multiple pairs of key/value returned.

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.entries();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 achieve asynchronous uploading of files.

refer to

1. Compatibility query

2. MDN

3. "Advanced JavaScript Programming"