javascript巧用eval函数组装表单输入项为json对象的方法

下面是详细讲解“javascript巧用eval函数组装表单输入项为json对象的方法”的完整攻略。

简介

在 Web 开发中，我们常常需要将用户在表单中输入的数据组装成 JSON 格式发送给后台进行处理。在传统的方法中，我们需要对每个表单元素逐一获取 value 值并组装成一个 JSON 对象，这种方式虽然可行，但显然效率较低。本文介绍一种巧用 eval 函数快速组装表单输入项为 JSON 对象的方法。

攻略

第一步：获取表单元素

首先我们需要获取表单中的所有输入元素，可以使用以下方式进行获取：

const form = document.getElementById('form')
const elements = form.elements

第二步：组装数据

获取到所有的表单元素之后，我们需要将它们组装成一个 JSON 对象。这里我们使用一个临时对象 data 进行存储数据：

const data = {}
for (let i = 0; i < elements.length; i++) {
  const element = elements[i]
  data[element.name] = element.value
}

在这段代码中，我们循环遍历所有的表单元素，将每个元素的 name 属性作为 data 对象的键值，将元素的 value 属性作为 data 对象的值存储起来。

第三步：将 JSON 对象序列化

将 data 对象序列化成 JSON 字符串，我们可以使用 JSON.stringify() 方法：

const json = JSON.stringify(data)

第四步：使用 eval 函数

接下来我们就可以使用 eval() 函数来将 JSON 字符串转成 JSON 对象了，代码如下：

const obj = eval('(' + json + ')')

注意：这里一定要注意在括号前后都要加上单引号，且使用小括号把整个表达式括起来，这是因为 eval 函数会将传入的字符串当做代码来执行，所以需要在字符串外侧添加一个括号，使其当做一个对象来解析。

示例

以下是一个表单的 HTML 代码：

<form id="demo">
  <input type="text" name="name" value="Marry" />
  <input type="number" name="age" value="20" />
  <input type="checkbox" name="gender" value="male" checked />
  <input type="checkbox" name="gender" value="female" />
  <input type="submit" value="提交" />
</form>

我们可以通过以下代码将表单数据转成 JSON 对象：

const form = document.getElementById('demo')
const elements = form.elements
const data = {}
for (let i = 0; i < elements.length; i++) {
  const element = elements[i]
  data[element.name] = element.value
}
const json = JSON.stringify(data)
const obj = eval('(' + json + ')')
console.log(obj)

运行上述代码会输出如下结果：

{
  "name": "Marry",
  "age": "20",
  "gender": [
    "male"
  ]
}

值得注意的是，由于我们的示例表单中有两个 gender 的 checkbox，所以在 JSON 对象中这个键对应的值变成了一个数组。