Function and usage of new FormData() - FormData object in JS

Posted by phprocker on Tue, 01 Feb 2022 00:02:58 +0100

Function and usage of new FormData() - FormData object in JS

Introduction to js FormData method

Formdata is ajax2 0 (XMLHttpRequest Level 2). Using the formdata object, the name and value of form elements can be combined to realize the serialization of form data, so as to introduce the splicing of form elements and improve work efficiency

First, we need to create this FormData object

var formData = new FormData();  // Empty instance object
// Creation of FormData() instance
// new FormData ( HTMLFormElement: ele)

When using the FormData constructor to create an instance object, you can pass an HTML form element, which can be any form control, including file input box, check box, etc.

Let's print this constructor

After printing, it is found that the structure of FormData itself is very simple, and there are only a few methods such as append, foreach and keys on the prototype object.

Main methods of FormData

Has = > returns a Boolean value indicating whether the FormData object contains some keys
Get = > returns the first value associated with the given key in the FormData object
Getall = > returns an array containing all the values associated with the given key in the FormData object
Append = > add a new attribute value to FormData. If the attribute value corresponding to FormData exists, overwrite the original value; otherwise, add a new attribute value.
The difference between set = > and append() is that if the specified key already exists, set() will overwrite the existing value with the new value, and append() will add the new value to the back of the existing value set.
Delete = > delete a key value pair from the FormData object
Keys = > returns an iterator object containing all keys
Values = > returns an iterator object containing all values.
Foreach = > traverse FormData object
Entries = > returns an iterator object containing all key value pairs

How FormData stores data

A pair of keys / values form a piece of data. The key is unique. A key can correspond to multiple values. If you use form initialization, each form field corresponds to a piece of data. Their HTML name attribute is the key value, and their value attribute is the corresponding value value.

Instance use

<body>
    <form name="formTest" id="myForm">
        <input type="text" placeholder="enter one user name" name="user" value="wendingding">
        <input type="text" placeholder="enter one user name" name="user" value="zidingyi">
        <input type="password" placeholder="Please input a password" name="pass" value="123456789">
    </form>
    <script>
        let myForm = document.getElementById("myForm")
        var formdata = new FormData(myForm);
        //  Get the corresponding value through get(key)/getAll(key),
        let getValue = formdata.get("user")  // Get the first value value with name as user
        let getAllValue = formdata.getAll("user")  // Get all the value values whose name is user and return an array

        //  Add data through append()/set()
        let addappend = formdata.append("user",'wendingding')  // If the data to be added already exists, add it later
        let addset = formdata.set("user","wendingding") // If the data to be added already exists, replace the old one with the new one

        //  Delete through delete()
        let deleteValue = formdata.delete("user")  // Receive a parameter indicating the name of the key value you want to delete. If there are multiple same key values, they will be deleted together

        //  Judge whether the FormData() object contains the key through has() 
        console.log(formdata.has("user")); // Returns a Boolean value

        //  Traverse all keys in the FormData object through keys().
        for(let key of formdata.keys()){
            console.log(key);  // Return all key s
        }

        // Traverse all values in the FormData object through values().
        for(let value of formdata.values()){
            console.log(value);  // Return all value s
        }

        // Traverse all key s and value s in the FormData object through entries().
        for(let pair of formdata.entries()){
            console.log(pair[0] +"," + pair[1]);
        }
    </script>
</body>

Topics: Javascript

Programmer Think

Function and usage of new FormData() - FormData object in JS