FormData()构造函数的介绍与使用+URLSearchParams构造函数的介绍与使用我的学习笔记，涉及内容有：

FormData()

概念：

js内置的构造函数，是专门用来获取表单的数据，需要new出对象来使用。

可以这样理解，FormData的作用和 jQuery中的 serialize() 作用一样，用于快速收集表单数据，不过serialize()获取的数据进行了格式转换。

原理&作用：

把form表单里所有带name属性的表单域，转为一个对象---也就是下面的formObj对象；
formObj对象里包含所有的带有name属性的表单域数据；
作用：可以达到快速获取表单数据的效果。

我的理解： FormData()拿取表单数据是拿表单域的name属性值和value值的，new出来的对象格式就如：”name值为对象属性名：value值为对象属性值“。

语法：

let formObj(随便取)=new FormData(dom元素form标签)

方法：

append ('key', 'value')--- 向对象中追加数据；

set ('key', 'value')--- 修改对象中的数据；

delete ('key')--- 从对象中删除数据；

get ('key')--- 获取指定key的一项数据；

getAll ('key')--- 获取指定key的全部数据；

forEach ()--- 遍历对象中的数据。

注意：

1、我们直接在控制台打印formObj是看不到我们想要看的数据的，需要用到forEach方法来遍历查看。如：


            // 通过formObj对象的forEach方法，拿到对象里的数据
            formObj.forEach((value, name) => {
                console.log(name, value)
            })
            
           /*  forEach第一个参数为对象属性值也就是表单域的value值，
            第二个参数为对象属性名也就是表单域的name属性值 */

----forEach第一个参数为属性值，第二个参数为属性名，第三个参数为对象。

2、FormData()构造函数只能拿带name属性的表单域数据。

3、对象使用方法时，参数代表的意思是：通常来说，第一个参数为属性值，第二个参数为属性名，第三个参数为对象。

URLSearchParams()

概念：

js内置的构造函数，需要new出对象来使用(new出来的对象为空对象)。

作用：

通常和FormData()new出来的对象一起使用，把获取到的表单数据格式转为username=11&password=22&gender=33格式；

再结合toString()方法把数据转为字符串。

---可以看出这种格式的数据，我们能直接用在url上，或者用在post--data上。

语法：

let src(随便取)=new URLSearchParams()

常用方法：

1、append(key, value)---给new出来的对象添加数据(key为属性名，value属性值)；

2、toString()---对new出来的对象里的数据进行格式转换，转化为字符串‘username=11&password=22&gender=33’

实现方法：

1、new一个空对象

 let str = new URLSearchParams()

2、给空对象里添加数据

 formObj.forEach((value, name) => {
                // 给str空对象添加数据
                str.append(name, value)
            })

3、对str里面的数据格式转化为字符串数据类型，可以看出此数据类型为url上参数的格式

console.log(str.toString())//username=11&password=22&gender=33

FormData和URLSearchParams连用的例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form>
        <input type="text" name="username" />
        <input type="text" name="password" />
        <input type="text" name="gender" />
        <button type="button">获取表单数据</button>
    </form>
    <script>
        // 获取按钮dom节点
        let button = document.querySelector('button')
        let datas//声明一个变量

        // 给按钮设置点击事件
        button.addEventListener('click', function () {


            // 通过FormData构造函数拿到form表单里所有带name属性的表单域数据
            let formObj = new FormData(document.querySelector('form'))
            //通过URLSearchParams构造函数new出一个对象，str为空对象
            let str = new URLSearchParams()


            // 通过formObj对象的forEach方法，拿到对象里的数据
            formObj.forEach((value, name) => {
                // 给str空对象添加数据
                str.append(name, value)
            })  /*  forEach第一个参数为对象属性值也就是表单域的value值，
             第二个参数为对象属性名也就是表单域的name属性值 */


            // 对str里面的数据转化为url上参数的格式
            datas = str.toString()
            console.log(datas)//username=11&password=22&gender=33

        })
    </script>
</body>

</html>

FormData()构造函数的介绍与使用+URLSearchParams构造函数的介绍与使用