从表单生成 JSON 字符串答案

【问题标题】：Generating JSON String from Form从表单生成 JSON 字符串
【发布时间】：2013-08-21 13:27:18
【问题描述】：

我是 JSON 的新手，正在努力理解它的工作原理。

HTML

<form id="edge" class="form-horizontal" method="post" action="javascript:submit();">
    <input type="text" class="input-xlarge" id="latency" name="latency" placeholder="latency">
    <input type="text" class="input-xlarge" id="throughput" name="throughput" placeholder="throughput">
    <input type="text" class="input-xlarge" id="outUID" name="outUID" placeholder="outUID">
    <input type="text" class="input-xlarge" id="inUID" name="inUID" placeholder="inUID">
    <button type="submit" class="btn btn-success" >Submit Data</button>
</form>

要生成的JSON字符串：

{"latency":1.6,"throughput":6.01,"outUID":{"V_ID":"40"},"inUID":{"V_ID":"16"}}

Here's the form and JSON String to be generated

谁能指导我如何创建嵌套的 JSON 对象？

【问题讨论】：

Convert form data to JS object with jQuery的可能重复
outUID 和 inUID 对象中的 V_ID 键/值对来自哪里？

标签： javascript jquery json post

【解决方案1】：

由于您似乎出于某种原因希望嵌套 outUID 和 inUID 的值，因此您需要手动构建对象。这是一个简单的例子：

var $latency = $('#latency'),
    $throughput = $('#throughput'),
    $outUID = $('#outUID'),
    $inUID = $('#inUID');

var myJSONObject = {
    latency:$latency.val(),
    throughput:$throughput.val(),
    outUID:{
        V_ID:$outUID.val()
    },
    inUID:{
        V_ID:$inUID.val()
    }
};
var stringJSON = JSON.stringify(myJSONObject);

【讨论】：

【解决方案2】：

纯javascript示例

var els=document.getElemtById('edge').getElementsByTagName('input');

或

var els=document.querySelectorAll('input[class=input-"xlarge"]');

获取元素

然后

var array=[]
for(var a=0,b;b=els[a]; ++a){
 array[a]=b.value
}

数组是json对象

JSON.styringify(array)

是json字符串

提示：如果您打算将其与 ajax 一起使用有一种新方法叫做 FormData();

所以：

var fd=FormData(document.getElemtById('edge'));

包含整个表单，包括文件

【讨论】：

【解决方案3】：

此代码允许您在需要时添加更多字段，而无需对字段属性进行硬编码

http://jsfiddle.net/6vQY9/

HTML

<form id="edge" class="form-horizontal" method="post" action="javascript:submit();">
    <input type="text" class="input-xlarge" id="latency" name="latency" placeholder="latency">
    <input type="text" class="input-xlarge" id="throughput" name="throughput" placeholder="throughput">
    <input type="text" class="input-xlarge" id="outUID" name="outUID" placeholder="outUID" data-prop="V_ID">
    <input type="text" class="input-xlarge" id="inUID" name="inUID" placeholder="inUID" data-prop="V_ID">
    <button type="submit" class="btn btn-success">Submit Data</button>
</form> <pre></pre>

function submit() {
    var JSONString = "";
    jQuery('#edge input').each(function () {
        var that = jQuery(this);
        var val = that.val();
        var partJSON = "";
        var quote = "\"";
        if (that.data('prop')) {
            partJSON = "{ " + quote +that.data('prop') + quote+ " : " + quote + val + quote + " }";
        } else {
            partJSON = val;
        }
        var comma = that.next('input').length > 0 ? "," : "";

        partJSON = quote + that.prop('id') + quote + ":" + partJSON + comma;
        JSONString += partJSON

    });

    JSONString = "{ " + JSONString + " }";

    jQuery('pre').text(JSONString);
}

【讨论】：