简介
在前端开发中，我们经常需要将表单的值序列化成 JSON 格式，以便于提交给服务器进行处理。手动编写序列化代码会比较麻烦，但 fortunately！我们有 form-serialize-json 这个 npm 包，让我们能够快速地将表单值从表单中读取并序列化为 JSON。
安装
使用 npm 包管理器进行安装，执行以下命令即可：
npm install form-serialize-json --save
使用
使用 form-serialize-json 非常简单：
import serialize from 'form-serialize-json';
const form = document.querySelector('form');
const data = serialize(form);
console.log(data);上面的代码将会将 form 表单中的所有字段序列化为一个 JSON 对象，并输出到控制台。
如果你只想序列化某几个字段，可以通过第二个参数传入字段名的数组，例如：
import serialize from 'form-serialize-json';
const form = document.querySelector('form');
const data = serialize(form, ['username', 'password']);
console.log(data);上面的代码仅将 username 和 password 两个字段序列化为 JSON。
如果你希望使用 urlencoded 格式而不是 JSON 格式，则可以传入第三个参数：
import serialize from 'form-serialize-json';
const form = document.querySelector('form');
const data = serialize(form, null, 'urlencoded');
console.log(data);上面的代码使用 urlencoded 格式序列化表单字段。
指南
在使用 form-serialize-json 的过程中，我们需要注意以下几点：
1. 表单元素必须有 name 属性
form-serialize-json 会从表单元素的 name 属性中读取字段名和字段值。
2. 多选项和多行文本框的值将被转换为数组
如果表单中包含多选项和多行文本框，它们的值将会被转换为数组，例如：
<form> <input type="checkbox" name="hobby" value="reading" checked> <input type="checkbox" name="hobby" value="sports"> <textarea name="comment">My comment.</textarea> </form>
上面的表单中的数据将会被序列化为以下 JSON 对象：
{
hobby: ['reading'], // 选中的复选框值被存储为数组形式
comment: 'My comment.'
}3. 同名的表单元素将被序列化为一个数组
如果表单中有多个同名的表单元素，它们的值将会被序列化为一个数组，例如：
<form> <input type="radio" name="gender" value="male" checked> <input type="radio" name="gender" value="female"> </form>
上面的表单中的数据将会被序列化为以下 JSON 对象：
{ gender: 'male' }如果我们希望将同名的表单元素序列化为一个数组，则需要在表单元素的 name 属性上加上 []，例如：
<form> <input type="checkbox" name="hobby[]" value="reading" checked> <input type="checkbox" name="hobby[]" value="sports"> </form>
上面的表单中的数据将会被序列化为以下 JSON 对象：
{ hobby: ['reading'] }结论
form-serialize-json 是一个非常便捷的 npm 包，可以帮助我们快速地将表单序列化为 JSON 格式。我们只需要注意表单元素的 name 属性、多选项和多行文本框的值和同名表单元素的处理方式，就能够愉快地使用它了。
示例代码
HTML 代码：
-- -------------------- ---- ------- ------ ------ -------------------------------- ------ ----------- --------------- ------------- ------------- ------ -------------------------------- ------ --------------- --------------- ------------- --------------- ------ ---------------------- ------ ------------- ---------- -------- ----------- ------ ---------------------------- ------ ------------ ------------- ------------ ------------ ------ ------------ ------------- --------------------- ------ -------------------------- ------ --------------- ------------ --------------- --------------- ------ --------------- ------------ --------------------- ------ ------------------------------ --------- -------------- --------------- ------------------- ------- ----------------------------- -------
JavaScript 代码：
import serialize from 'form-serialize-json';
const form = document.querySelector('form');
const data = serialize(form);
console.log(data);运行代码后，输出以下 JSON 对象：
{
username: 'John',
password: '123456',
age: 18,
gender: 'male',
hobby: ['reading'],
comment: 'My comment.'
}来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1581e8991b448e6dc0