FormData对象

FormData对象的使用
FormData的实例方法

1. FormData 对象的作用

1. 模拟HTML 表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式
2. 异步上传二进制文件

2. FormData 对象的使用

1. 准备HTML表单

 <!-- 创建普通的html表单 -->
    <form id="form">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="button" id="btn" value="提交">
    </form>

2. 将HTML转化为FormData对象

     // 获取html表单
        var form = document.getElementById('form')
     // 将普通的html表单转换为表单对象
        var formData = new FormData(form)

3. 提交表单对象

    // 发送ajax请求
            xhr.send(formData)

示例代码如下：

05-FormData对象的使用方法.html ：

 <!-- 创建普通的html表单 -->
    <form id="form">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="button" id="btn" value="提交">
    </form>
    <script type="text/javascript">
        // 获取按钮
        var btn = document.getElementById('btn')
            // 获取html表单
        var form = document.getElementById('form')
            // 为按钮添加点击事件
        btn.onclick = function() {
            // 将普通的html表单转换为表单对象
            var formData = new FormData(form)
                // 创建ajax对象
            var xhr = new XMLHttpRequest()
                // 对ajax 对象进行配置
            xhr.open('post', 'http://localhost:3000/formData')
                // 发送ajax请求
            xhr.send(formData)
                // 监听xhr对象下面的onload事件
            xhr.onload = function() {
                // 对象http状态码进行判断
                if (xhr.status == 200) {
                    console.log(xhr.responseText)
                }
            }
        }
    </script>

对应的app.js 中的代码：

const express = require('express')
const path = require('path')
const formidable = require('formidable')
const app = express()

// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));


app.post('/formData', (req, res) => {
    // 创建formidable表单解析对象
    const form = new formidable.IncomingForm()
        // 解析客户端传递过来的FormData对象
    form.parse(req, (err, fields, files) => {
        res.send(fields)
    })
});

注意：

• FormData对象不能用于get请求，因为对象需要被传递到send方法中，而get请求方式的请参参数只能存放在请求地址后面
• 服务器端bodyParser模块不能解析FormData对象表单数据，我们需要使用formidable模块进行解析

2. FormData 对象的实例方法

1. 获取表单对象中属性的值
   

get的应用： 获取值后对值进行验证

2. 设置表单对象中属性的值

set的应用：表单数据的二次处理

关于set方法的注意点：

3. 删除表单对象中属性的值

关于delete的应用：注册账号时，需要再次输入密码来确认，但是提交到服务器的时候，我们只需要提交一次即可。则可以删除一次密码

4. 向表单对象中追加属性值

关于append的应用：向空表单追加值

注意：set方法和append方法的区别是，在属性名已存在的情况下，set会覆盖已有键名的值，append会保留两个值

示例代码：

06-FormData对象下的实例方法.html :

 <!-- 创建普通的html表单 -->
    <form id="form">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="button" id="btn" value="提交">
    </form>
    <script type="text/javascript">
        // 获取按钮
        var btn = document.getElementById('btn')
            // 获取html表单
        var form = document.getElementById('form')
            // 为按钮添加点击事件
        btn.onclick = function() {
            // 将普通的html表单转换为表单对象
            var formData = new FormData(form)

            /*
            在 formData对象下面有一个方法 get('key')，用来获取表单对象属性的值
            应用： 获取值后对值进行验证
            */

            console.log(formData.get('username')); //用来获取表单对象属性的值

            /*
            set('key','value')，用来设置表单对象中属性的值
            应用：表单数据的二次处理
            */

            formData.set('username', 'itcast')
            formData.append('username', 'itheima')

            formData.set('age', 18)

            /*
            delete('key')，用来设置表单对象中属性的值
            应用：注册账号时，需要再次输入密码来确认，但是提交到服务器
            的时候，我们只需要提交一次即可。则可以删除一次密码
            */

            formData.delete('password')


            // 创建ajax对象
            var xhr = new XMLHttpRequest()
                // 对ajax 对象进行配置
            xhr.open('post', 'http://localhost:3000/formData')
                // 发送ajax请求
            xhr.send(formData)
                // 监听xhr对象下面的onload事件
            xhr.onload = function() {
                // 对象http状态码进行判断
                if (xhr.status == 200) {
                    console.log(xhr.responseText)
                }
            }

            // 创建一个空的表单对象
            var f = new FormData()
            f.append('sex', '男')
            console.log(f.get('sex'))
        }
    </script>

对应的app.js 中的代码:

app.post('/formData', (req, res) => {
    // 创建formidable表单解析对象
    const form = new formidable.IncomingForm()
        // 解析客户端传递过来的FormData对象
    form.parse(req, (err, fields, files) => {
        res.send(fields)
    })
});