javascript - 从表单生成 JSON 字符串

Question

我是 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"}}

这是要生成的表单和 JSON 字符串

有人可以指导我如何创建嵌套的 JSON 对象吗？

Answer 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);

Answer 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'));

包含整个表单，包括文件

Answer 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>

JS

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);
}