Shulou(Shulou.com)06/01 Report--

This article mainly explains "the main uses of FormData and the introduction of examples". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor to take you to learn "the main uses of FormData and example usage introduction" bar!

Let's print this constructor and take a look.

FormData ()

Arguments: null

Caller: null

Length: 0

Name: "FormData"

Prototype: FormData

Append: optional append ()

Delete: optional delete ()

Entries: optional entries ()

ForEach: optional forEach ()

Get: compare ()

GetAll: optional getAll ()

Has: optional has ()

Keys: optional keys ()

Set: compare ()

Values: optional values ()

Constructor: optional FormData ()

Symbol (Symbol.iterator): compare entries ()

Symbol (Symbol.toStringTag): "FormData"

_ _ proto__: Object

_ _ proto__: contacts ()

[[Scopes]]: Scopes [0]

By printing and looking at the structure of the formData, you can find that the interface object itself is very simple. There are only a few methods on the formData constructor prototype object, such as append, forEach, keys, and so on.

The main uses of FormData

Uploading files asynchronously in a web request for form data processing

Creation of FormData instance

◆ new FormData (HTMLFormElement: ele)

When you create an instance object using the FormData constructor, you can pass an HTML form element that allows any form control, including file input boxes, check boxes, and so on.

/ / list several ways to create formData instance objects / / 001 create non-passing task parameters var formData1 = new FormData () through constructor; / / empty instance objects / / set data (simulation form) / / set data formData1.set ("name", "text top"); formData1.set ("email", "wendingding_ios@126.com"); formData1.set ("friends", "bear big")

/ / set data (append) formData1.append ("friends", "skinhead strength"); formData1.append ("friends", "turnip head")

/ / View instance data formData1.forEach (function (value,key) {

Console.log (key,value);}) console.log ("- -"); / / 002 get the form tag and pass it to the FormData constructor var formData2 = new FormData (document.getElementById ("formTest")) formData2.forEach (function (value,key) {

Console.log (key,value);})

Note: form tags must add a name attribute to get their data

Description: in the above sample code, there are two ways to create (obtain) formData instance objects. You can first create an empty instance object or initialize it directly through the form tags on the page.

When the formData data is loaded, it can be submitted to the server directly through the ajax method. The execution result of the above code is given below.

The main methods of FormData

As shown in the figure above, the prototype object of the FormData constructor has a bunch of methods defined on it. These methods are easy to use, and then we will briefly introduce them in the form of code.

/ / 01 create an empty formData instance object var data = new FormData ()

/ / 02 set data (add) data.set ("age", 18)

Data.set ("name", "LiuY")

Data.set ("type", "mage")

Data.set ("address", "Spring Center")

/ / 03 set data (modify and delete) data.set ("name", "MiTaoer")

Data.delete ("address")

/ / 04 setting data (additional) data.append ("type", "warrior")

Data.append ("type", "Auxiliary");

/ / 05 read data (specify key-one) console.log (data.get ("name")); / / MiTaoer console.log (data.get ("type")); / / mage

/ / 06 read data (specify key-All) console.log (data.getAll ("type")); / / ["mage", "warrior", "auxiliary"]

/ / 07 check whether you have the specified key console.log (data.has ("age")); / / true console.log (data.has ("email")); / / false

/ / basic use of the iterator (keys) var keyIterator = data.keys () / / get iterator object console.log (keyIterator.next ()); / {done: false, value: "age"} console.log (keyIterator.next ()); / / {done: false, value: "name"} console.log (keyIterator.next ()); / {done: false, value: "type"} console.log (keyIterator.next ()) / / {done: false, value: "type"} console.log (keyIterator.next ()); / / {done: false, value: "type"} console.log (keyIterator.next ()); / / {done: true, value: undefined}

Console.log ("_")

/ / basic use of iterators (values) var valueIterator = data.values (); / / get iterator object console.log (valueIterator.next ()); / {done: false, value: "18"} console.log (valueIterator.next ()); / {done: false, value: "MiTaoer"} console.log (valueIterator.next ()); / {done: false, value: "mage"} console.log (valueIterator.next ()) / / {done: false, value: "soldier"} console.log (valueIterator.next ()); / / {done: false, value: "auxiliary"} console.log (valueIterator.next ()); / / {done: true, value: undefined}

/ / 10 basic use of iterators (entries) console.log (data.entries (). Next ()); / / {done: false, value: ["age", "18"]}

/ / 11 traversal data.forEach of formData object (function (value,key) {

/ / output result / / age 18 / / name MiTaoer / / type mage / / type warrior / / type Auxiliary console.log (key,value)

})

Code description

In fact, these methods of the formData object do not need to be overstated, the above code and instructions are easy to understand. In general, it provides a complete set of methods for manipulating data, including set, modification, query, and deletion, etc. The difference between the append method and the set method is that it does not overwrite but deals with data of the same name as an array push.

The keys (), values (), and entries () methods of the formData object are similar, and when called, you get an iterator object of type Iterator that can call the next () method to iterate, and the done in the print result is marked with a Boolean value, and the value is true if the iteration ends.

The forEach () of the formData object receives a callback function parameter, where the first parameter is the value of the current traversal data, and the second parameter is key (same as the forEach method of the array). If Ajax sends a GET request and you need to submit form data through formData, you can use this method to concatenate query strings.

A typical use of FormData is given the following form data here, and then describes how to use FormData to handle form data to send GET and POST requests.

Whether or not to check

Submit form data ```* * GET request * *

/ / 01 get the btn tag var oBtn = document.getElementsByTagName ("button") [0] in the page

/ / 02 add a click event to the button label oBtn.onclick = function () {

/ / 03 use Ajax to send GET request var xhr = new XMLHttpRequest ()

Xhr.open ("GET", "http://127.0.0.1:3000?"+getData(),true);"

Xhr.send ()

Xhr.onreadystatechange = function () {

If (xhr.status > = 200 & & xhr.status = 200 & & xhr.status = 200 & & xhr.status

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.