将 HTML 表单架构保存到 JSON

Posted 2023-03-05

【中文标题】将 HTML 表单架构保存到 JSON

【英文标题】：Save HTML form schema to JSON

【发布时间】：2015-02-06 04:25:15

【问题描述】：

有没有办法将 html 表单模式保存为 JSON？

例如当我有这样的事情时

<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

我怎样才能实现这样的目标：

[
  
    field: 'input',
    type: 'text',
    name: 'firstname'
  ,
  
    field: 'input',
    type: 'text',
    name: 'lastname'
  ,
]

我并不是说它必须是上面的精确输出，但是我怎样才能实现类似的东西呢？

【参考方案1】：

我们的想法是做这样的事情。您可以遍历表单elements 元素集合，并使用每个元素提取必要的信息。

在下面的代码中，我使用了Array.prototype.map 方法，但使用简单的for 循环可能会更方便。它会给你更多的定制空间。

function serializeSchema(form) 
    return [].map.call(form.elements, function(el) 
        return 
            type: el.type,
            name: el.name,
            value: el.value
        ;
    );
;

var form = document.querySelector('form'),
    schema = serializeSchema(form);

alert(JSON.stringify(schema, null, 4));

<form>
    <input type="text" name="firstname" value="Test">
    <input type="text" name="lastname">
    <select name="age" id="">
        <option value="123" selected>123</option>
    </select>
    <input type="checkbox" name ="agree" value="1" checked> agree
</form>

还有一个注意事项。您要实现的目标与 jQuery 的 $.fn.serializeArray 方法非常相似（它不收集 type）。然而，扩展serializeArray 使其也返回元素的type 非常简单。