JavaScript 动态构建 JSON 对象：原理、风险与现代替代方案

沈知远

发布时间：2026-10-13 | 5人浏览过

原创

本文将分析 JavaScript 中利用 eval 函数动态构建 JSON 对象的技巧及其潜在风险，并介绍更安全的现代替代方案，帮助开发者在 AJAX 交互中高效且安全地处理表单数据。

核心痛点：繁琐的表单数据收集

在使用 AJAX 进行 Web 开发时，一个常见场景是在提交前收集表单输入项并组成 JSON 对象发送到服务端。对于字段较少的表单，直接赋值即可：

var myObj = {};
myObj.x = document.getElementById("x").value;
myObj.y = document.getElementById("y").value;
// ... 然后进行 ajax post 或 get 提交

然而，当表单拥有几十甚至上百个输入项时，这种硬编码方式会导致代码极度冗长且难以维护。此时，部分开发者可能会想到利用 JavaScript 中的 eval 函数来简化操作，通过动态执行字符串代码来赋值对象属性。

eval 动态构建对象的原理

eval 函数可以将字符串当作 JavaScript 代码执行。利用这一特性，可以模拟类似反射的机制，动态创建嵌套对象并赋值。例如：

eval('A={}' );
if (A.b == undefined) {
    A.b = {};
}
eval('A.b.c = 1');
alert(A.b.c); // 输出 1

基于此原理，原始示例提供了一个名为 setFormModel 的函数，旨在自动遍历页面上的所有 input 和 select 元素，根据其 name 属性动态向指定模型对象添加属性：

function setFormModel(modelName){
  eval(modelName + "={}");
  
  var inputArr = document.getElementsByTagName("INPUT");
  for(var i=0; i

调用逻辑如下：

setFormModel("AwbModel");
// AwbModel 现在包含了所有 name 属性匹配且 isModel!=false 的表单值

关键安全风险与警示

尽管上述 eval 方法在功能上实现了快速组装，但它引入了极其严重的安全隐患：跨站脚本攻击（XSS）。

恶意代码注入：如果用户输入的表单内容包含恶意 JavaScript 代码（如 alert(1) 或窃取 cookie 的脚本），eval 会直接执行这些内容。由于代码拼接了用户输入的值，攻击者可以通过构造特殊的 name 或 value 截断现有语句并注入新逻辑。
不可预测的执行环境：eval 在全局作用域或当前作用域中执行代码，难以沙盒化，极易造成意外行为或全局变量污染。

因此，在现代 Web 开发标准中，eval 被视为“邪恶”的代码模式，应严格避免用于处理用户输入。

现代替代方案：FormData 与手动遍历

为了安全且高效地实现同样的目的，推荐使用以下两种方法：

方法一：使用 FormData API（推荐）

HTML5 提供的 FormData 接口可以自动序列化表单数据，无需手动遍历 DOM。这是最简洁且标准的做法：

// 假设有一个 id 为 'myForm' 的表单元素
var formData = new FormData(document.getElementById('myForm'));

// 如果需要将其转换为 JSON 字符串以便 Ajax 发送（注意：JSON 不原生支持二进制文件）
var json = {};
for (var pair of formData.entries()) {
    json[pair[0]] = pair[1];
}

console.log(JSON.stringify(json));

方法二：安全的手动遍历构建对象

如果不使用 FormData，也可以通过原生 DOM 操作安全地构建对象，避免字符串拼接带来的 XSS 风险：

function buildJsonSafe(formId) {
    var form = document.getElementById(formId);
    var obj = {};
    
    // 遍历所有可提交的表单控件
    var inputs = form.elements;
    for (var i = 0; i < inputs.length; i++) {
        var el = inputs[i];
        if (el.name && !el.disabled && el.type !== 'submit' && el.type !== 'button') {
            // 根据类型处理不同控件的值
            if (el.type === 'select-one') {
                obj[el.name] = el.options[el.selectedIndex].value;
            } else {
                obj[el.name] = el.value;
            }
        }
    }
    return obj;
}

var awbData = buildJsonSafe('myForm');

这种方法虽然代码稍多，但完全避免了 eval，保证了数据的安全性，且性能更优。