Javascript 如何将标准 HTML 表单转换为包含所有数据的 JSON 表示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7181276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I convert a standard HTML form to JSON representation that includes all data?
提问by jini
I have a simple HTML form:
我有一个简单的 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>
I need to get a JSON representation of the Form elements including id, value, type, form action, form id etc.
我需要获取表单元素的 JSON 表示，包括 id、值、类型、表单操作、表单 id 等。
I tried playing with the following code but I am not getting what I am looking for:
我尝试使用以下代码，但没有得到我想要的：
<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>
I get:
我得到：
{"length":1,"0":{"firstname":{},"lastname":{},"address":{},"zip":{},"sex":{"0":{},"1":{}},"6":{}},"context":{"jQuery16108216209608688556":1},"selector":"#formid1"}
close
关闭
回答by sh0rug0ru
Try this:
尝试这个：
$('#formid1').serializeArray().reduce(function(obj, v) { obj[v.name] = v.value; return obj; }, { });
回答by Domenic Bove
Hi I'm working on the same problem! The way I went around it was by using an onsubmit function rather than action. You pass everything within the form to a javascript function which then gives you access to the form data. The function I made uses an alert to show you have access to that data. Here's the code:
嗨，我正在解决同样的问题！我绕过它的方法是使用 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>
