首页 » Web API » JavaScript FormData

JavaScript FormData

摘要：在本教程中，您将了解 JavaScript FormData API 以及如何使用 fetch API 发送 FormData。

JavaScript FormData API 简介

假设您有一个包含两个字段的订阅表单：姓名和电子邮件。

<form id="subscription">
    <h1>Subscribe</h1>
    <div id="message"></div>
    <div class="field">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your fullname" required />
        <small></small>
    </div>
    <div class="field">
        <label for="email">Email:</label>
        <input type="text" id="email" name="email" placeholder="Enter your email address" required />
        <small></small>
    </div>
    <div class="field">
        <button type="submit" class="full" id="submit">Subscribe</button>
    </div>
</form>Code language: HTML, XML (xml)

当您单击提交按钮时，Web 浏览器会将表单中姓名和电子邮件字段的值提交到服务器。

类似地，FormData 接口允许您在 JavaScript 中构建一组表示表单字段及其值的键值对。

一旦有了 FormData 对象，您就可以使用 Fetch API 将其发布到服务器。如果您想像 GET 请求一样提交表单，可以将 FormData 对象传递给 URLSearchParams 构造函数。

创建 FormData 对象

以下代码从 HTML 表单元素创建一个新的 FormData 对象

const formData = new FormData(form);Code language: JavaScript (javascript)

以下脚本显示了 FormData 对象的值

const btn = document.querySelector('#submit');
const form = document.querySelector('#subscription');


btn.addEventListener('click', (e) => {
    // prevent the form from submitting
    e.preventDefault();

    // show the form values
    const formData = new FormData(form);
    const values = [...formData.entries()];
    console.log(values);
});Code language: JavaScript (javascript)

它是如何工作的。

  • 首先，使用 document 对象的 querySelector() 方法选择提交按钮。
  • 接下来，添加一个事件处理程序来处理提交按钮的单击事件。
  • 然后，调用事件对象的 preventDefault() 方法来避免表单提交。
  • 之后，从表单元素创建一个新的 FormData 对象。
  • 最后，调用 FormData 对象的 entries() 方法。由于 entries() 方法返回一个迭代器，您必须使用 扩展运算符 (...)。

FormData 方法

FormData 对象具有以下方法

append()

append() 方法有两种形式

FormData.append(name, value)
FormData.append(name, value, file)Code language: JavaScript (javascript)

append() 方法将一个新值附加到 FormData 对象中现有的键上，或者如果键不存在，则添加该键。

delete()

FormData.delete(name);Code language: JavaScript (javascript)

delete() 方法根据键的名称从 FormData 对象中删除一个键值对。

entries()

FormData.entries()Code language: JavaScript (javascript)

entries() 方法返回一个包含 FormData 对象中所有键值对的 迭代器。

get()

FormData.get(name)Code language: JavaScript (javascript)

get() 方法根据键名返回第一个值。

getAll()

FormData.getAll(name)Code language: JavaScript (javascript)

getAll() 方法根据键名返回所有值的数组。

has()

FormData.has(name);Code language: JavaScript (javascript)

如果 FormData 对象包含键名，则 has() 方法返回 true。

keys()

FormData.keys()Code language: JavaScript (javascript)

keys() 方法返回所有键的迭代器。

set()

set() 方法有两种形式

FormData.set(name, value);
FormData.set(name, value, filename);Code language: JavaScript (javascript)

set() 方法为现有键名设置一个新值，或者如果键不存在，则添加键值对。

values()

FormData.values()Code language: JavaScript (javascript)

values() 方法返回 FormData 对象中所有值的迭代器。

使用 fetch API 发送 FormData

我们将构建一个简单的 使用 FetchAPI 将 FormData 对象发布到服务器的订阅表单。

以下说明了如何使用 fetch API 发送 FormData

const btn = document.querySelector('#submit');
const form = document.querySelector('#subscription');
const messageEl = document.querySelector('#message');

btn.addEventListener('click', (e) => {
    e.preventDefault();
    subscribe();
});

const subscribe = async () => {
    try {
        let response = await fetch('subscribe.php', {
        method: 'POST',
        body: new FormData(form),
        });
        const result = await response.json();

        showMessage(result.message, response.status == 200 ? 'success' : 'error');
    } catch (error) {
        showMessage(error.message, 'error');
    }
};

const showMessage = (message, type = 'success') => {
    messageEl.innerHTML = `
        <div class="alert alert-${type}">
        ${message}
        </div>
    `;
};Code language: JavaScript (javascript)

在这个例子中，我们定义了一个名为 subscribe() 的函数，并在提交按钮的单击事件侦听器中调用它。subscribe() 函数是一个 异步函数，因为它使用了 await 关键字。

在 subscribe() 函数内部

首先，使用 fetch() 方法将表单数据发布到 subscribe.php 脚本

let response = await fetch('subscribe.php', {
    method: 'POST',
    body: new FormData(form),
});Code language: JavaScript (javascript)

其次，通过调用 response 对象的 json() 方法获取 JSON 响应

const result = await response.json();Code language: JavaScript (javascript)

第三，如果 HTTP 状态码为 200，则显示成功消息。否则，显示错误消息。result 的 message 属性存储成功或错误消息。

showMessage(result.message, response.status == 200 ? 'success' : 'error');Code language: JavaScript (javascript)

最后，定义 showMessage() 函数来显示成功或错误消息

const showMessage = (message, type = 'success') => {
    messageEl.innerHTML = `
        <div class="alert alert-${type}">
        ${message}
        </div>
    `;
};Code language: JavaScript (javascript)

将所有内容放在一起。

index.html

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

    <head>
        <title>JavaScript Form Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="css/style.css" />
    </head>

    <body>
        <div class="container">
            <form id="subscription">
                <h1>Subscribe</h1>
                <div id="message"></div>
                <div class="field">
                    <label for="name">Name:</label>
                    <input type="text" id="name" name="name" placeholder="Enter your fullname" required />
                    <small></small>
                </div>
                <div class="field">
                    <label for="email">Email:</label>
                    <input type="text" id="email" name="email" placeholder="Enter your email address" required />
                    <small></small>
                </div>
                <div class="field">
                    <button type="submit" class="full" id="submit">Subscribe</button>
                </div>
            </form>
        </div>
        <script src="js/app.js"></script>
    </body>

</html>Code language: HTML, XML (xml)

app.js

const btn = document.querySelector('#submit');
const form = document.querySelector('#subscription');
const messageEl = document.querySelector('#message');

btn.addEventListener('click', (e) => {
    e.preventDefault();
    subscribe();
});

const subscribe = async () => {
    try {
        let response = await fetch('subscribe.php', {
            method: 'POST',
            body: new FormData(form),
        });
        const result = await response.json();

        showMessage(result.message, response.status == 200 ? 'success' : 'error');

    } catch (error) {
        showMessage(error.message, 'error');
    }
};

const showMessage = (message, type = 'success') => {
    messageEl.innerHTML = `
        <div class="alert alert-${type}">
        ${message}
        </div>
    `;
};Code language: JavaScript (javascript)

摘要

  • 使用 JavaScript FormData API 捕获 HTML 表单值。
  • 使用 Fetch API 将 FormData 提交到服务器。
本教程是否有帮助？
JavaScript AbortController
之前
JavaScript AbortController
接下来
JavaScript 对话框 API
JavaScript Dialog API