Question

我有一个包含多个文本框的表单。我希望将整个表单序列化为json，使得这些文本框保留在数组中。我有以下html

<form id ="myform">
    <input type="text" name="options[]"/>
    <input type="text" name="options[]"/>
    <input type="text" name="options[]"/>
    <input type="text" name="options[]"/>
</form>

我使用jquery将其转换为json

JSON.stringify($("#myform").serializeArray());

这给了我以下内容：

  {
    "options[]":"Content of the last textbox"
  }

但我想要

  {
   "options":
             {
              "0":"value",
              "1":"value",
              "2":"value",
              "3":"value",
             }
  }

如何使用javascript实现此目的？

Answer 1

var arr = $("#myform").serializeArray();
var result = {"objects":{}};
arr.forEach(function (elem, i) {
    result.objects[i] = elem["value"];
});

console.log(JSON.stringify(result));

Here is a fiddle

Answer 2

这可以使用jQuery serializeArray()作为辅助

手动完成

var serializedArray = $('#myform').serializeArray();
var customArray = {};
customArray['options'] = {};
for(key in serializedArray)
{
    customArray['options'][key] = serializedArray[key]['value'];
}

fiddle

Answer 3

试试这个

<script type="text/javascript">
    $(document).ready(function(){

        $("#myform").submit(function(event){
            var foo=$(this).serializeArray();
            var option={"option":foo};

            console.log(JSON.stringify(option));
            return false;
        });


    });


      </script>

Answer 4

所以在我解决了同样的问题后，我遇到了这个问题。我到处搜索一个解决方案，感觉我错过了一些基本的东西（javascript / jquery或.net MVC），它会为我做这件事。但这就是我最终设法解决类似问题的方法。

    var serializeForm = function (form) {
        var result = [];
        var buildArray = function m(name, value) {
            var match = name.match(/\[\d+\]/);
            if (!match) {
                var ret = {};
                ret[name] = value;
    
                return ret;
            } else {
                var ret = {};
                var thisName = name.slice(0, match.index);
                var index = match[0].match(/\d+/)[0];
    
                ret[thisName] = m(name.slice(match.index + match[0].length + 1), value);
                ret.index = index;
                return ret;
            }
        };
    
        $.each(form, function (i, o) {
            result.push(buildArray(o.name, o.value));
        });
    
        var json = {};
        var buildObject = function m(json, o) {
            var indexKey = 'index';
            for (var key in o) {
                if (key != indexKey) {
                    if (o.hasOwnProperty(indexKey)) {
                        if (!json.hasOwnProperty(key)) {
                            json[key] = [];
                        }
    
                        if (!json[key].hasOwnProperty(o[indexKey])) {
                            json[key][o[indexKey]] = {};
                        }
    
                        json[key][o[indexKey]] = m(json[key][o[indexKey]], o[key]);
                    } else {
                        json[key] = o[key];
                    }
                }
            }
            return json;
        }
        $.each(result, function (i, o) {
            buildObject(json, o);
        });
        return json;
    }
    
    $(function(){
      console.log(serializeForm($('form').serializeArray()));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input name="low[0].mid[0].high" value="0 0" type="text" />
  <input name="low[0].mid[1].high" value="0 1" type="text" />
  <input name="low[1].mid[0].high" value="1 0" type="text" />
  <input name="low[1].mid[1].high" value="1 1" type="text" />
</form>

将多维html表单数据转换为json

4 个答案: