将HTML表单架构保存到JSON

Question

有没有办法将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'
  },
]

我不是说它必须是如上所述的精确输出,但我如何能够实现类似的东西呢？

Answer 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元素非常简单.