javascript 如何将复杂的 HTML 表单发布为 JSON？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5166672/
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 to post a complex HTML form as JSON?
提问by Serge Wautier
I have a very complex form in a web page. User actually builds up a complex object. The UI is handled using jQuery (showing, hiding sections, duplicating and deleting sub-forms,...).
我在网页中有一个非常复杂的表单。用户实际上构建了一个复杂的对象。UI 使用 jQuery 处理（显示、隐藏部分、复制和删除子表单，...）。
Simply posting the form upon user submission, although possible, doesn't seem the best solution: It would be hard to makeup unique names for fields (there can be arrays of objects) and to decode the whole stuff on server side.
简单地在用户提交时发布表单，虽然可能，但似乎不是最好的解决方案：很难为字段（可能有对象数组）组成唯一的名称并在服务器端解码整个内容。
I guess I should rather post a JSON representation of the object. How do I do that?
我想我应该发布对象的 JSON 表示。我怎么做？
I'm not trying to make an ajax call. I want to submit the form but using JSON instead of an usual application/x-www-form-urlencoded form.
我不是要进行 ajax 调用。我想提交表单，但使用 JSON 而不是通常的 application/x-www-form-urlencoded 表单。
FWIW, the backend is ASP.NET MVC.
FWIW，后端是 ASP.NET MVC。
TIA,
TIA,
回答by jenson-button-event
Serialise to JSON using script...
使用脚本序列化为 JSON...
Although this answer uses Ajax, you could instead write the serialised string to an input[type=hidden] in your form
尽管此答案使用 Ajax，但您可以改为将序列化字符串写入表单中的 input[type=hidden]
回答by Achilleterzo
You can try this:
你可以试试这个：
$("form").submit(function()
{
//Checking data here:
$("input").each(function(i, obj)
{
});
alert($(this).serialize());
alert(toJSON($(this).serializeArray()));
//return false;
});
function toJSON(obj)
{
var json = '({';
$.each(obj, function(k,v){
var q = typeof v == 'string' ? ~v.indexOf("'") ? '"' : "'" : '';
if (typeof v == 'object')
v = toJSON(v).slice(0,-1).substr(1);
json+= k + ':'+ q + v + q + ',';
});
return json.slice(0,-1)+'})';
};
My fiddle: http://jsfiddle.net/Achilleterzo/6Zj6n/
回答by Pipalayan Nayak
If you are using jquery you can look into these two functions .serialize() and .serializeArray()
如果您正在使用 jquery，您可以查看这两个函数 .serialize() 和 .serializeArray()
These functions will help you get the form data, without you having to manually iterate.
这些函数将帮助您获取表单数据，而无需您手动迭代。
回答by ThiefMaster
Use the jquery form pluginto submit the form via AJAX.
For duplicate field names the default way is usually appending []to the name - most server-side languages then create an array containing all submitted values. Depending on the language it might also happen without the []but I'm sure MSDN will help you since you are using ASP.NET for your backend.
使用jquery 表单插件通过 AJAX 提交表单。对于重复的字段名称，默认方式通常是附加[]到名称上——大多数服务器端语言然后创建一个包含所有提交值的数组。根据语言的不同，它也可能在没有[].
