如何将表单数据转换为JavaScript对象

简介

在JavaScript中处理表单时，你通常需要将表单数据转换为JavaScript对象（JSON），以便填充数组、数据库、本地存储，将其发送到API，甚至在你的应用程序中使用这些数据。表单数据和JSON之间的转换是处理表单数据最常见的方式之一，因为它为该数据的其他大量用途打开了大门。

在这篇文章中，我们将看看如何在不安装任何不必要的依赖的情况下轻松地将表单数据转换为JavaScript对象。我们将通过使用FormData API来实现这一点--这是一个内置的浏览器API，用于获取表单值作为JavaScript对象。

注意这个应用程序在CodePen上有一个演示。

让我们从创建一个简单的HTML表单开始，其中包含几个常见的表单字段--两个输入字段、一个文本区和一个提交按钮。

<form>
    <div class="form-control">
        <label for="name">Full Name</label>
        <input id="name" name="name" type="text" />
    </div>
    <div class="form-control">
        <label for="email">Email Address</label>
        <input id="email" name="email" type="email" />
    </div>
    <div class="form-control">
        <label for="message">Enter a Message</label>
        <textarea id="message" name="message" rows="6" cols="65"></textarea>
    </div>
    <button class="btn" type="submit">Send</button>
</form>

现在，我们可以看看如何使用FormData API将其数据转换成JSON*（JavaScript对象符号）*。

FormDataAPI

FormData是一个内置的浏览器API，它为我们提供了一种方法来轻松访问HTML表单中的任何字段。使用FormData API的第一步是使用一些适当的HTML DOM方法获取表单元素--document.querySelector() 或document.getElementById() 。之后，我们可以添加一个事件监听器，当它在表单上注册了一个submit 事件时，调用callbackFunction 。

const form = document.getElementById('contact-form');

form.addEventListener('submit', callbackFunction);

为了使事件监听器发挥作用，我们必须定义处理submit 事件的函数。现在，让我们只是让它创建FormData 对象并将其内容记录到控制台。

function callbackFunction(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);
    console.log(myFormData);
}

注意我们使用preventDefault() 来防止表单在点击提交按钮后重新加载--这是默认行为。这是一个明智的默认行为，但为了在我们的应用程序中进行说明--我们将阻止它并在右侧的div上显示数据。

当你运行上面的代码时，结果将是一个空对象，这不是我们所期望的。

FormData {}

尽管看起来我们已经创建了一个空对象，但事实并非如此。那个FormData 对象对我们表单中的每个字段都有一个键值对--因此，我们需要遍历所有这些键值对，并将它们存储在一个单独的对象中。之后，我们可以使用该对象来访问表单的每个字段。

我们有两种主要的方法可以从FormData API中获取数据--一种是循环浏览每一个键值对，另一种是使用Object.fromEntries() 方法。

如何用循环将表单数据转换为JSON

从FormData 对象中创建一个可读对象的第一种方法是遍历其键值对，并手动添加键和值到新创建的对象中。为了这篇文章的目的，我们将使用JavaScript中的forEach() 循环。首先，我们将创建一个空对象，然后迭代我们在上一节中创建的FormData 对象。

const formDataObj = {};
myFormData.forEach((value, key) => (formDataObj[key] = value));

注意： forEach() 方法对async 不友好，如果你需要你的回调函数支持async 的调用--你应该使用for-of 循环。

在这一点上，我们可以修改上一节中的callbackFunction() ，使其正确地将表单数据输出为一个对象。

const form = document.getElementById('contact-form');

form.addEventListener('submit', callbackFunction);
                      
function callbackFunction(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);

    const formDataObj = {};
    myFormData.forEach((value, key) => (formDataObj[key] = value));
    console.log(formDataObj);
});

现在，当我们填写表格并点击提交按钮时，我们应该有以下输出。

{
    "name": "John Doe",
    "email": "john@gmail.com",
    "message": "Hello World"
}

这个对象的键是字段名，值是相应的字段值。

如何用Object.fromEntries()将表单数据转换为JSON格式？

另外，我们可以使用Object.fromEnteries() 方法而不是循环来从FormData 对象中检索表单字段。这样我们就不需要在开始之前创建一个空对象--该方法允许我们直接将FormData 对象转换为相应的JavaScript对象。

const formDataObj = Object.fromEntries(myFormData.entries());

在这一点上，我们修改后的回调函数将看起来像这样。

const form = document.getElementById('contact-form');

form.addEventListener('submit', callbackFunction);
function callbackFunction(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);

    const formDataObj = Object.fromEntries(myFormData.entries());
    console.log(formDataObj);
});

使用Object.fromEnteries() 填充的对象将以表单字段的名称为键，以相应的表单值为值。

{
    "name": "John Doe",
    "email": "john@gmail.com",
    "message": "Hello World"
}

注意对于这两种方法，我们可以使用JSON.stringify() ，将对象转换成JSON字符串，然后我们可以用它来发送JSON编码的数据给API。

如何使用FormData API获取JSON中的多个选定值

上述方法几乎与所有的表单字段兼容--输入文本、数字、单选、选择......。然而，还有一些字段的操作会比较麻烦。最值得注意的是复选框--它允许选择多个值。但是，前面显示的方法将用一个值替换所有这些被选中的值--这个值最终被存储在结果对象中。让我们来看看如何解决这个问题，并将所有选定的值存储在结果对象中。假设我们有一个带有复选框字段的HTML表单。

<!-- -->

<div class="form-control-2">
    <p class="group-label">Your favourite pet:</p>
    <input type="checkbox" name="favorite_pet" value="Cats" />Cats
    <input type="checkbox" name="favorite_pet" value="Dogs" />Dogs
    <input type="checkbox" name="favorite_pet" value="Birds" />Birds
</div>

<!-- -->

我们可以使用FormData 对象上的getAll() 方法将所有选择的数据放入一个数组。

formDataObj.favorite_pet = myFormData.getAll('favorite_pet');

在这一点上，我们的代码将看起来像这样。

const form = document.getElementById('contact-form');

form.addEventListener('submit', callbackFunction);
function callbackFunction(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);

    const formDataObj = Object.fromEntries(myFormData.entries());
    formDataObj.favorite_pet = myFormData.getAll('favorite_pet');
    console.log(formDataObj);
});

而填充的对象将包含一个用户在复选框字段中选择的数值数组。

{
    "name": "uhuk",
    "email": "hukhhk@jf.ff",
    "message": "jgghhjb",
    "favorite_pet": [
    "Cats",
    "Birds"
    ]
}

注意你可以查看CodePen上的这个实时演示，它使用了所有主要的表单字段类型，并在提交时将数据生成为一个JavaScript对象。

总结

在这篇文章中，我们已经看了如何使用FormData API将表单数据转换为JavaScript对象，而不需要任何额外的依赖。我们还学习了如何正确处理各种类型的表单字段（输入、文本区域等），以及一些比较棘手的表单字段，如复选框。