前端学习 FormData 对象的基本用法

最新推荐文章于 2023-12-18 09:35:44 发布

火星飞鸟

最新推荐文章于 2023-12-18 09:35:44 发布

阅读量1.1k

点赞数 2

分类专栏：前后端交互 JavaScript Ajax 文章标签：前端 javascript

本文链接：https://blog.csdn.net/Jack_lzx/article/details/109750066

版权

JavaScript 同时被 3 个专栏收录

88 篇文章 1 订阅

订阅专栏

前后端交互

31 篇文章 0 订阅

订阅专栏

Ajax

8 篇文章 0 订阅

订阅专栏

1. `FormData`对象的作用

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

2. `FormData`对象的使用

准备HTML表单

<form id="form">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="button">
</form>

将HTML表单转化为FormData对象

var form = document.getElementById('form');
var formData = new FormData(form);

提交表单对象

xhr.send(formData);

注意：
（1）Formdata对象不能用于get请求，因为对象需要被传递到send方法中，而get请求方式的请求参数只能放在请求地址的后面。
（2）服务器端bodyParser模块不能解析formData对象表单数据，需要使用formidable模块进行解析。

3. 简单实例

代码：

FormData.html：

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 创建普通的html表单 -->
    <form id="form">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="button" id="btn" value="提交">
    </form>
    <script>
        // 获取按钮
        var btn = document.getElementById('btn');
        // 获取表单
        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>
</body>

</html>

app.js：

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 引入formidable模块
const formidable = require('formidable');
// 创建web服务器
const app = express();

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

app.post('/formData', (req, res) => {
    // 创建formidable表单解析对象
    const form = new formidable.IncomingForm();
    // 解析客户端传递过来的FormData对象
    // fields普通请求参数
    // files关于文件上传的一些信息
    form.parse(req, (err, fields, files) => {
        res.send(fields);
    });
});

// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');

实现效果：

在这里插入图片描述

火星飞鸟

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习 FormData 对象的基本用法

1. FormData对象的作用模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。异步上传二进制文件。2. FormData对象的使用准备HTML表单<form id="form"> <input type="text" name="username"> <input type="password" name="password"> <input type="button"&g
复制链接

扫一扫