如何将标准 HTML 表单转换为包含所有数据的 JSON 表示？答案

【问题标题】：How do I convert a standard HTML form to JSON representation that includes all data?如何将标准 HTML 表单转换为包含所有数据的 JSON 表示？
【发布时间】：2011-08-24 19:39:59
【问题描述】：

我有一个简单的 HTML 表单：

<form id="formid1" action="#" method="post">
    <table>
        <tr><td> First name: </td><td><input type="text" name="firstname" id="firstname"/>  </td></tr>
        <tr><td>  Last name: </td><td><input type="text" name="lastname" id="lastname"/>  </td></tr>
        <tr><td> Address:  </td><td> <input type="text" name="address" id="address"/> </td></tr>
        <tr><td> Zip: </td><td> <input type="text" name="zip" id="zip"/> </td></tr>
        <tr><td> Sex:  </td><td> <input type="radio" name="sex" value="male" /> Male<br />
            <input type="radio" name="sex" value="female" /> Female<br /></td></tr>

        <tr><td>  </td><td>  <input type="submit" value="Submit" /></td></tr>

    </table>
</form>

我需要获取表单元素的 JSON 表示形式，包括 id、值、类型、表单操作、表单 id 等。

我尝试使用以下代码，但没有得到我想要的：

<script>
$(document).ready(function(){

    var encoded = $.toJSON($('#formid1')); 

    $("#formid1").submit(function() {
  $.colorbox({html:'<p>Form Converted to JSON Data: <br /><br /><br /><br /><br /></p>'+ encoded  });
      return false;
    });

    });
</script>

我明白了：

{"length":1,"0":{"firstname":{},"lastname":{},"address":{},"zip":{},"sex":{"0":{},"1":{}},"6":{}},"context":{"jQuery16108216209608688556":1},"selector":"#formid1"}

关闭

【问题讨论】：

在这个例子中，你希望你的 JSON 是什么样子的？
Convert form data to JS object with jQuery 的可能重复项
Serialize complex form to JSON object using jQuery的可能重复

标签： javascript jquery

【解决方案1】：

试试这个：

$('#formid1').serializeArray().reduce(function(obj, v) { obj[v.name] = v.value; return obj; }, { });

【讨论】：

【解决方案2】：

您好，我正在解决同样的问题！我绕过它的方法是使用 onsubmit 函数而不是操作。您将表单中的所有内容传递给 javascript 函数，然后您可以访问表单数据。我制作的功能使用警报来显示您可以访问该数据。代码如下：

<html>
<body>

<form onsubmit="handleForm(this)">
<table>
    <tr><td> First name: </td><td><input type="text" name="firstname"  id="firstname"/>  </td></tr>
    <tr><td>  Last name: </td><td><input type="text" name="lastname" id="lastname"/>  </td></tr>
    <tr><td> Address:  </td><td> <input type="text" name="address" id="address"/> </td></tr>
    <tr><td> Zip: </td><td> <input type="text" name="zip" id="zip"/> </td></tr>
    <tr><td> Sex:  </td><td> <input type="radio" name="sex" value="male" /> Male<br />
        <input type="radio" name="sex" value="female" /> Female<br /></td></tr>

    <tr><td>  </td><td>  <input type="submit" value="Submit" /></td></tr>

</table>
</form>

<script>
function handleForm(arr) {
    alert(arr['firstname'].value + arr['lastname'].value);
}
</script>

</body>
</html>

【讨论】：

OP 想要的是将表单转换为 JSON，而不仅仅是从表单中获取某个属性。