使用jQuery将表单数据转换为JavaScript对象

时间:2009-07-26 13:39:55

标签: javascript jquery json serialization

如何将表单的所有元素转换为JavaScript对象?

我想从我的表单中自动构建一个JavaScript对象,而不必遍历每个元素。我不想要$('#formid').serialize();返回的字符串,也不想要$('#formid').serializeArray();

返回的地图

57 个答案:

答案 0 :(得分:1607)

serializeArray已经做到了。您只需按照所需格式按摩数据:

function objectifyForm(formArray) {//serialize data function

  var returnArray = {};
  for (var i = 0; i < formArray.length; i++){
    returnArray[formArray[i]['name']] = formArray[i]['value'];
  }
  return returnArray;
}

注意与实际输入同名的隐藏字段,因为它们会被覆盖。

答案 1 :(得分:429)

将表格转换为JSON LIKE A BOSS


当前来源位于GitHub和bower。

  

$ bower install jquery-serialize-object


以下代码现已已弃用

以下代码可以使用各种输入名称;并按照您的预期处理它们。

例如:

<!-- all of these will work! -->
<input name="honey[badger]" value="a">
<input name="wombat[]" value="b">
<input name="hello[panda][]" value="c">
<input name="animals[0][name]" value="d">
<input name="animals[0][breed]" value="e">
<input name="crazy[1][][wonky]" value="f">
<input name="dream[as][vividly][as][you][can]" value="g">
// output
{
  "honey":{
    "badger":"a"
  },
  "wombat":["b"],
  "hello":{
    "panda":["c"]
  },
  "animals":[
    {
      "name":"d",
      "breed":"e"
    }
  ],
  "crazy":[
    null,
    [
      {"wonky":"f"}
    ]
  ],
  "dream":{
    "as":{
      "vividly":{
        "as":{
          "you":{
            "can":"g"
          }
        }
      }
    }
  }
}

用法

$('#my-form').serializeObject();

巫术(JavaScript)

(function($){
    $.fn.serializeObject = function(){

        var self = this,
            json = {},
            push_counters = {},
            patterns = {
                "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
                "push":     /^$/,
                "fixed":    /^\d+$/,
                "named":    /^[a-zA-Z0-9_]+$/
            };


        this.build = function(base, key, value){
            base[key] = value;
            return base;
        };

        this.push_counter = function(key){
            if(push_counters[key] === undefined){
                push_counters[key] = 0;
            }
            return push_counters[key]++;
        };

        $.each($(this).serializeArray(), function(){

            // skip invalid keys
            if(!patterns.validate.test(this.name)){
                return;
            }

            var k,
                keys = this.name.match(patterns.key),
                merge = this.value,
                reverse_key = this.name;

            while((k = keys.pop()) !== undefined){

                // adjust reverse_key
                reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                // push
                if(k.match(patterns.push)){
                    merge = self.build([], self.push_counter(reverse_key), merge);
                }

                // fixed
                else if(k.match(patterns.fixed)){
                    merge = self.build([], k, merge);
                }

                // named
                else if(k.match(patterns.named)){
                    merge = self.build({}, k, merge);
                }
            }

            json = $.extend(true, json, merge);
        });

        return json;
    };
})(jQuery);

答案 2 :(得分:271)

出了什么问题:

var data = {};
$(".form-selector").serializeArray().map(function(x){data[x.name] = x.value;}); 

答案 3 :(得分:102)

Tobias Cohen解决方案的固定版本。这个正确处理了0''等虚假值。

jQuery.fn.serializeObject = function() {
  var arrayData, objectData;
  arrayData = this.serializeArray();
  objectData = {};

  $.each(arrayData, function() {
    var value;

    if (this.value != null) {
      value = this.value;
    } else {
      value = '';
    }

    if (objectData[this.name] != null) {
      if (!objectData[this.name].push) {
        objectData[this.name] = [objectData[this.name]];
      }

      objectData[this.name].push(value);
    } else {
      objectData[this.name] = value;
    }
  });

  return objectData;
};

还有一个CoffeeScript版本,方便您编码:

jQuery.fn.serializeObject = ->
  arrayData = @serializeArray()
  objectData = {}

  $.each arrayData, ->
    if @value?
      value = @value
    else
      value = ''

    if objectData[@name]?
      unless objectData[@name].push
        objectData[@name] = [objectData[@name]]

      objectData[@name].push value
    else
      objectData[@name] = value

  return objectData

答案 4 :(得分:54)

我喜欢使用Array.prototype.reduce,因为它是一个单行,并且它不依赖于Underscore.js等:

$('#formid').serializeArray()
    .reduce(function(a, x) { a[x.name] = x.value; return a; }, {});

这类似于使用Array.prototype.map的答案,但您不需要使用其他对象变量来混淆范围。一站式购物。

重要提示:包含具有重复name属性的输入的表单是有效的HTML,实际上是一种常见方法。在这种情况下使用此线程中的任何答案都是不合适的(因为对象键必须是唯一的)。

答案 5 :(得分:30)

所有这些答案对我来说都是如此。为简单起见,有一些话要说。只要你的所有表单输入都设置了name属性,这应该只适用于jim dandy。

$('form.myform').submit(function () {
  var $this = $(this)
    , viewArr = $this.serializeArray()
    , view = {};

  for (var i in viewArr) {
    view[viewArr[i].name] = viewArr[i].value;
  }

  //Do stuff with view object here (e.g. JSON.stringify?)
});

答案 6 :(得分:24)

如果您使用的是Underscore.js,则可以使用相对简洁的方法:

_.object(_.map($('#myform').serializeArray(), _.values))

答案 7 :(得分:21)

如果不检查每个元素,就没有办法做到这一点。你真正想知道的是“还有其他人已经编写了一个将表单转换为JSON对象的方法吗?”类似下面的内容应该有效 - 请注意,它只会为您提供通过POST返回的表单元素(必须具有名称)。这是未经过测试

function formToJSON( selector )
{
     var form = {};
     $(selector).find(':input[name]:enabled').each( function() {
         var self = $(this);
         var name = self.attr('name');
         if (form[name]) {
            form[name] = form[name] + ',' + self.val();
         }
         else {
            form[name] = self.val();
         }
     });

     return form;
}

答案 8 :(得分:17)

好的,我知道这已经有了一个高度赞成的答案,但最近有另一个similar question was asked,我也被引导到了这个问题。我也想提供我的解决方案,因为它提供了优于已接受解决方案的优势:您可以包含已禁用的表单元素(有时这很重要,具体取决于UI的功能)

以下是other SO question的回答:

最初,我们使用的是jQuery的serializeArray()方法,但不包括已禁用的表单元素。我们经常会禁用与页面上其他来源“同步”的表单元素,但我们仍然需要将数据包含在序列化对象中。所以serializeArray()已经出局了。我们使用:input选择器获取给定容器中的所有输入元素(启用和禁用),然后$.map()创建我们的对象。

var inputs = $("#container :input");
var obj = $.map(inputs, function(n, i)
{
    var o = {};
    o[n.name] = $(n).val();
    return o;
});
console.log(obj);

请注意,要使其正常工作,您的每个输入都需要name属性,该属性将是生成对象的属性名称。

这实际上与我们使用的内容略有不同。我们需要创建一个结构为.NET IDictionary的对象,所以我们使用了这个:(我在这里提供它以防它有用)

var obj = $.map(inputs, function(n, i)
{
    return { Key: n.name, Value: $(n).val() };
});
console.log(obj);

我喜欢这两种解决方案,因为它们是$.map()函数的简单用法,并且您可以完全控制选择器(因此,最终包含在结果对象中的元素)。此外,不需要额外的插件。简单的旧jQuery。

答案 9 :(得分:16)

此函数应处理多维数组以及具有相同名称的多个元素。

到目前为止,我已经使用它几年了:

jQuery.fn.serializeJSON=function() {
  var json = {};
  jQuery.map(jQuery(this).serializeArray(), function(n, i) {
    var _ = n.name.indexOf('[');
    if (_ > -1) {
      var o = json;
      _name = n.name.replace(/\]/gi, '').split('[');
      for (var i=0, len=_name.length; i<len; i++) {
        if (i == len-1) {
          if (o[_name[i]]) {
            if (typeof o[_name[i]] == 'string') {
              o[_name[i]] = [o[_name[i]]];
            }
            o[_name[i]].push(n.value);
          }
          else o[_name[i]] = n.value || '';
        }
        else o = o[_name[i]] = o[_name[i]] || {};
      }
    }
    else {
      if (json[n.name] !== undefined) {
        if (!json[n.name].push) {
          json[n.name] = [json[n.name]];
        }
        json[n.name].push(n.value || '');
      }
      else json[n.name] = n.value || '';      
    }
  });
  return json;
};

答案 10 :(得分:15)

你可以这样做:

var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());

请参阅 JSON

答案 11 :(得分:14)

[UPDATE 2020]

在Vanilla js中使用一个简单的oneliner,该杠杆利用fromEntries(一如既往,请检查浏览器支持):

Object.fromEntries(new FormData(form))

答案 12 :(得分:14)

  

对于所有的给定答案,有一些问题是......

如果输入名称为name[key]之类的数组,但它会像这样生成

 name:{
   key : value
 }

例如: 如果我有这样的形式。

    <form>
        <input name="name" value="value" >
        <input name="name1[key1]" value="value1" >
        <input name="name2[key2]" value="value2" >
        <input name="name3[key3]" value="value3" >
    </form>

然后它将使用所有给定的答案生成这样的对象。

Object {
    name : 'value',
    name1[key1] : 'value1',
    name2[key2] : 'value2',
    name3[key3] : 'value3', 
}

但它必须生成如下所示,任何人都希望如下所示。

Object {
    name : 'value',
    name1 : {
        key1 : 'value1'
    },
    name2 : {
        key2 : 'value2'
    },
    name3 : {
        key2 : 'value2'
    }
}
  

然后在js代码下面试试这个。

&#13;
&#13;
(function($){
    $.fn.getForm2obj = function(){
        var _ = {},_t=this;
        this.c = function(k,v){ eval("c = typeof "+k+";"); if(c == 'undefined') _t.b(k,v);}
        this.b = function(k,v,a = 0){ if(a) eval(k+".push("+v+");"); else eval(k+"="+v+";"); };
        $.map(this.serializeArray(),function(n){
            if(n.name.indexOf('[') > -1 ){
                var keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g),le = Object.keys(keys).length,tmp = '_';
                $.map(keys,function(key,i){
                    if(key == ''){
                        eval("ale = Object.keys("+tmp+").length;");
                        if(!ale) _t.b(tmp,'[]');
                        if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'",1);
                        else _t.b(tmp += "["+ale+"]",'{}');
                    }else{
                        _t.c(tmp += "['"+key+"']",'{}');
                        if(le == (i+1)) _t.b(tmp,"'"+n['value']+"'");
                    }
                });
            }else _t.b("_['"+n['name']+"']","'"+n['value']+"'");
        });
        return _;
    }
})(jQuery);
console.log($('form').getForm2obj());
&#13;
<!DOCTYPE html><html><head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title>Convert form data to JavaScript object with jQuery</title>
</head>
<body>
    <form>
        <input name="name" value="value" >
        <input name="name1[key1]" value="value1" >
        <input name="name2[key2]" value="value2" >
        <input name="name3[key3]" value="value3" >
        <input type="checkbox" name="name4[]" value="1" checked="checked">
        <input type="checkbox" name="name4[]" value="2">
        <input type="checkbox" name="name4[]" value="3">
    </form>
</body></html>
&#13;
&#13;
&#13;

答案 13 :(得分:12)

使用:

function form_to_json (selector) {
  var ary = $(selector).serializeArray();
  var obj = {};
  for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;
  return obj;
}

输出:

{"myfield": "myfield value", "passwordfield": "mypasswordvalue"}

答案 14 :(得分:11)

单行(没有除jQuery之外的依赖项),使用固定对象绑定传递给map方法的函数。

$('form').serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0]

它做什么?

"id=2&value=1&comment=ok" => Object { id: "2", value: "1", comment: "ok" }

适用于渐进式网络应用程序(可以轻松支持常规表单提交操作以及ajax请求)

答案 15 :(得分:7)

从某些older回答:

$('form input, form select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{})

答案 16 :(得分:7)

简洁是最好的。我使用了一个简单的字符串替换和正则表达式,到目前为止它们就像一个魅力。我不是正规表达专家,但我敢打赌,你甚至可以填充非常复杂的对象。

var values = $(this).serialize(),
attributes = {};

values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
    attributes[name] = value;
});

答案 17 :(得分:6)

使用maček's solution,我修改它以使用ASP.NET MVC在同一表单上处理其嵌套/复杂对象的方式。您所要做的就是将验证部分修改为:

"validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:\[(?:\d*|[a-zA-Z0-9_]+)\])*(?:\.)[a-zA-Z][a-zA-Z0-9_]*)*$/,

这将匹配并正确映射具有以下名称的元素:

<input type="text" name="zooName" />

<input type="text" name="zooAnimals[0].name" />

答案 18 :(得分:5)

我发现此问题的最简单,最准确的方法是使用bbq plugin或此one(大小约为0.5K字节)。

它也适用于多维数组。

&#13;
&#13;
$.fn.serializeObject = function()
{
	return $.deparam(this.serialize());
};
&#13;
&#13;
&#13;

答案 19 :(得分:5)

我发现Tobias Cohen的代码存在问题(我没有足够的要点直接评论它),否则这对我有用。如果您有两个名称相同的选项,两个值为“”,原始代码将生成“name”:“”而不是“name”:[“”,“”]

我认为可以通过在第一个if条件中添加“|| o [this.name] ==''”来解决这个问题:

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] || o[this.name] == '') {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

答案 20 :(得分:4)

有一个插件可以用于jQuery, jquery.serializeJSON 。我现在已成功地在一些项目中使用它。它就像一个魅力。

答案 21 :(得分:3)

我最近遇到了同样的问题,并提出this .toJSON jQuery plugin将表单转换为具有相同结构的JSON对象。这对于动态生成的表单尤其有用,您希望让用户在特定位置添加更多字段。

关键是你实际上可能想要构建一个表单,以便它本身就有一个结构,所以假设你想创建一个表单,用户在城里插入他最喜欢的地方:你可以想象这个表单代表一个{ {1}} XML元素,其中包含用户喜欢的地点列表,因此包含<places>...</places>元素列表,每个元素包含例如<place>...</place>元素,<name>...</name>元素,然后是<type>...</type>元素列表{1}}元素表示您可以在这样的地方执行的活动。所以你的XML结构将是这样的:

<activity>...</activity>

有一个JSON对象是多么酷,这将代表这个确切的结构,所以你将能够:

  • 将此对象存储在任何CouchDB - 类似数据库
  • 从$ _POST []服务器端读取它并检索正确嵌套的数组,然后可以进行语义操作
  • 使用一些服务器端脚本将其转换为格式良好的XML文件(即使您不知道其先验的确切结构)
  • 只是以某种方式在任何Node.js中使用它 - 就像服务器脚本
  • 一样

好的,现在我们需要考虑一个表单如何表示XML文件。

当然<places> <place> <name>Home</name> <type>dwelling</type> <activity>sleep</activity> <activity>eat</activity> <activity>watch TV</activity> </place> <place>...</place> <place>...</place> </places> 标记是<form>,但是我们有root元素,它是一个容器而不是数据元素本身,所以我们不能使用输入标记它

这是<place>标签派上用场的地方!我们将使用<fieldset>标记来表示表单/ XML表示中的所有容器元素,因此得到如下结果:

<fieldset>

正如你在这种形式中看到的那样,我们打破了唯一名称的规则,但这很好,因为它们将被转换为元素数组,因此它们只能通过数组中的索引引用。

此时你可以看到表单里面没有<form name="places"> <fieldset name="place"> <input type="text" name="name"/> <select name="type"> <option value="dwelling">Dwelling</option> <option value="restoration">Restoration</option> <option value="sport">Sport</option> <option value="administrative">Administrative</option> </select> <input type="text" name="activity"/> <input type="text" name="activity"/> <input type="text" name="activity"/> </fieldset> </form> 名字,一切都很漂亮,简单和语义。

现在我们希望将此表单转换为JSON对象,如下所示:

name="array[]"

要做到这一点,我开发了this jQuery plugin here,有人在this Code Review thread帮助优化,看起来像这样:

{'places':{

    'place':[

        {

            'name': 'Home',
            'type': 'dwelling',

            'activity':[

                 'sleep',
                 'eat',
                 'watch TV'

            ]

        },

        {...},

        {...}

    ]

}}

我还让this one blog post更多地解释了这一点。

这会将表单中的所有内容转换为JSON(甚至是收音机和复选框),您还剩下要做的就是调用

$.fn.toJSO = function () {
    var obj = {},
        $kids = $(this).children('[name]');
    if (!$kids.length) {
        return $(this).val();
    }
    $kids.each(function () {
        var $el = $(this),
            name = $el.attr('name');
        if ($el.siblings("[name=" + name + "]").length) {
            if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {
                obj[name] = obj[name] || [];
                obj[name].push($el.toJSO());
            }
        } else {
            obj[name] = $el.toJSO();
        }
    });
    return obj;
};

我知道有很多方法可以将表单转换为JSON对象,并确保$.post('script.php',('form').toJSO(), ...); .serialize()在大多数情况下工作得很好并且主要用于使用,但我认为将表单编写为具有有意义名称的XML结构并将其转换为格式良好的JSON对象值得尝试,而且如果您需要,您可以添加同名输入标记而无需担心这一事实非常有用检索动态生成的表单数据。

我希望这有助于某人!

答案 22 :(得分:3)

我自己将一个表单编码为多维JavaScript对象,以便在生产中使用它。结果是https://github.com/serbanghita/formToObject.js

答案 23 :(得分:3)

在一个衬板中利用ES6优势:

$("form").serializeArray().reduce((o, {name: n, value: v}) => Object.assign(o, { [n]: v }), {});

答案 24 :(得分:3)

将任何内容变为对象(未经过单元测试)

<script type="text/javascript">
string = {};

string.repeat = function(string, count)
{
    return new Array(count+1).join(string);
}

string.count = function(string)
{
    var count = 0;

    for (var i=1; i<arguments.length; i++)
    {
        var results = string.match(new RegExp(arguments[i], 'g'));
        count += results ? results.length : 0;
    }

    return count;
}

array = {};

array.merge = function(arr1, arr2)
{
    for (var i in arr2)
    {
        if (arr1[i] && typeof arr1[i] == 'object' && typeof arr2[i] == 'object')
            arr1[i] = array.merge(arr1[i], arr2[i]);
        else
            arr1[i] = arr2[i]
    }

    return arr1;
}

array.print = function(obj)
{
    var arr = [];
    $.each(obj, function(key, val) {
        var next = key + ": ";
        next += $.isPlainObject(val) ? array.print(val) : val;
        arr.push( next );
      });

    return "{ " +  arr.join(", ") + " }";
}

node = {};

node.objectify = function(node, params)
{
    if (!params)
        params = {};

    if (!params.selector)
        params.selector = "*";

    if (!params.key)
        params.key = "name";

    if (!params.value)
        params.value = "value";

    var o = {};
    var indexes = {};

    $(node).find(params.selector+"["+params.key+"]").each(function()
    {
        var name = $(this).attr(params.key),
            value = $(this).attr(params.value);

        var obj = $.parseJSON("{"+name.replace(/([^\[]*)/, function()
        {
            return '"'+arguments[1]+'"';
        }).replace(/\[(.*?)\]/gi, function()
        {
            if (arguments[1].length == 0)
            {
                var index = arguments[3].substring(0, arguments[2]);
                indexes[index] = indexes[index] !== undefined ? indexes[index]+1 : 0;

                return ':{"'+indexes[index]+'"';
            }
            else
                return ':{"'+escape(arguments[1])+'"';
        })+':"'+value.replace(/[\\"]/gi, function()
        {
            return "\\"+arguments[0]; 
        })+'"'+string.repeat('}', string.count(name, ']'))+"}");

        o = array.merge(o, obj);
    });

    return o;
}
</script>

测试结果:

$(document).ready(function()
{
    console.log(array.print(node.objectify($("form"), {})));
    console.log(array.print(node.objectify($("form"), {selector: "select"})));
});

<form>
    <input name='input[a]' type='text' value='text'/>
    <select name='input[b]'>
        <option>select</option>
    </select>

    <input name='otherinput[c][a]' value='a'/>
    <input name='otherinput[c][]' value='b'/>
    <input name='otherinput[d][b]' value='c'/>
    <input name='otherinput[c][]' value='d'/>

    <input type='hidden' name='anotherinput' value='hidden'/>
    <input type='hidden' name='anotherinput' value='1'/>

    <input type='submit' value='submit'/>
</form>

将产生:

{ input: { a: text, b: select }, otherinput: { c: { a: a, 0: b, 1: d }, d: { b: c } }, anotherinput: 1 }
{ input: { b: select } }

答案 25 :(得分:3)

我发现所选解决方案存在问题。

当使用具有基于数组的名称的表单时,jQuery serializeArray()函数实际上已经死了。

我有一个PHP框架,它使用基于数组的字段名称,允许同一个表单在多个视图中多次放在同一页面上。这可以方便地在同一页面上添加,编辑和删除,而不会冲突表单模型。

由于我想要在不必采用这种绝对基本功能的情况下对表单进行分类,我决定编写自己的seralizeArray():

        var $vals = {};

        $("#video_edit_form input").each(function(i){
            var name = $(this).attr("name").replace(/editSingleForm\[/i, '');

            name = name.replace(/\]/i, '');

            switch($(this).attr("type")){
                case "text":
                    $vals[name] = $(this).val();
                    break;
                case "checkbox":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                case "radio":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                default:
                    break;
            }
        });

请注意:这也可以在表单submit()之外使用,因此如果您的代码的其余部分发生错误,如果您放置在“保存更改”的链接按钮上,表单将不会提交。

另请注意,此函数永远不应用于验证表单,仅用于收集要发送到服务器端进行验证的数据。使用这种弱的和批量分配的代码会导致XSS等等。

答案 26 :(得分:3)

我更喜欢这种方法,因为:您不必迭代2个集合,如果需要,您可以获取除“name”和“value”之外的其他内容,并且可以在将值存储之前清理它们的值对象(例如,如果您有不希望存储的默认值)。

$.formObject = function($o) {
    var o = {},
        real_value = function($field) {
            var val = $field.val() || "";

            // additional cleaning here, if needed

            return val;
        };

    if (typeof o != "object") {
        $o = $(o);
    }

    $(":input[name]", $o).each(function(i, field) {
        var $field = $(field),
            name = $field.attr("name"),
            value = real_value($field);

        if (o[name]) {
            if (!$.isArray(o[name])) {
                o[name] = [o[name]];
            }

            o[name].push(value);
        }

        else {
            o[name] = value;
        }
    });

    return o;
}

像这样使用:

var obj = $.formObject($("#someForm"));

仅在Firefox中测试过。

答案 27 :(得分:2)

另一个答案

&#13;
&#13;
document.addEventListener("DOMContentLoaded", function() {
  setInterval(function() {
    var form = document.getElementById('form') || document.querySelector('form[name="userprofile"]');
    var json = Array.from(new FormData(form)).map(function(e,i) {this[e[0]]=e[1]; return this;}.bind({}))[0];
    
    console.log(json)
    document.querySelector('#asJSON').value = JSON.stringify(json);
  }, 1000);
})
&#13;
<form name="userprofile" id="form">
  <p>Name <input type="text" name="firstname" value="John"/></p>
  <p>Family name <input name="lastname" value="Smith"/></p>
  <p>Work <input name="employment[name]" value="inc, Inc."/></p>
  <p>Works since <input name="employment[since]" value="2017" /></p>
  <p>Photo <input type="file" /></p>
  <p>Send <input type="submit" /></p>
</form>

JSON: <textarea id="asJSON"></textarea>
&#13;
&#13;
&#13;

FormData:https://developer.mozilla.org/en-US/docs/Web/API/FormData

答案 28 :(得分:2)

要获得快速,现代的解决方案,请使用JSONify jQuery插件。下面的示例是从GitHub自述文件中逐字记录的。所有这些都归功于该插件的作者Kushal Pandya。

假设:

<form id="myform">
    <label>Name:</label>
    <input type="text" name="name"/>
    <label>Email</label>
    <input type="text" name="email"/>
    <label>Password</label>
    <input type="password" name="password"/>
</form>

运行:

$('#myform').jsonify();

产地:

{"name":"Joe User","email":"joe@example.com","password":"mypass"}

如果你想用这个JSON对象做一个jQuery POST:

$('#mybutton').click(function() {
    $.post('/api/user', JSON.stringify($('#myform').jsonify()));
}

答案 29 :(得分:2)

我喜欢samuels版本,但我相信它有一个小错误。通常JSON作为

发送
  

{ “coreSKU”: “PCGUYJS”, “name_de”: “不管”,...

不是

  

[{ “coreSKU”: “PCGUYJS”},{ “name_de”: “不管”},...

所以IMO的功能应该是:

App.toJson = function( selector ) {
    var o = {};
    $.map( $( selector ), function( n,i )
    {
        o[n.name] = $(n).val();
    });     
    return o;
}

并将其包装在数据数组中(通常也是如此),最后将其作为astring发送 App.stringify({data:App.toJson('#cropform:input')})

对于精简版的Question 3593046字符串化,请查看json2.js的每个可能性版本。这应该涵盖所有:)

答案 30 :(得分:2)

使用lodash#set

let serialized = [
  { key: 'data[model][id]', value: 1 },
  { key: 'data[model][name]', value: 'product' },
  { key: 'sid', value: 'dh0un1hr4d' }
];

serialized.reduce(function(res, item) {
  _.set(res, item.key, item.value);
  return res;
}, {});

// returns
{
  "data": {
    "model": {
      "id": 1,
      "name": "product"
    }
  },
  "sid": "dh0un1hr4d"
}

答案 31 :(得分:1)

由于XSS攻击,我不会在现场网站上使用它,可能还有很多其他问题,但这里有一个简单的例子说明你可以做什么:

$("#myform").submit(function(){
    var arr = $(this).serializeArray();
    var json = "";
    jQuery.each(arr, function(){
        jQuery.each(this, function(i, val){
            if (i=="name") {
                json += '"' + val + '":';
            } else if (i=="value") {
                json += '"' + val.replace(/"/g, '\\"') + '",';
            }
        });
    });
    json = "{" + json.substring(0, json.length - 1) + "}";
    // do something with json
    return false;
});

答案 32 :(得分:1)

int y = x + x

答案 33 :(得分:1)

所以我使用了接受的答案,发现了一个重大缺陷 它不支持输入数组,如:

<input type="checkbox" name="array[]" value="1"/>
<input type="checkbox" name="array[]" value="2"/>
<input type="checkbox" name="array[]" value="3"/>

这个小改动应该解决这个问题:

function objectifyForm(inp){
    var rObject = {};
    for (var i = 0; i < inp.length; i++){
        if(inp[i]['name'].substr(inp[i]['name'].length - 2) == "[]"){
            var tmp = inp[i]['name'].substr(0, inp[i]['name'].length-2);
            if(Array.isArray(rObject[tmp])){
                rObject[tmp].push(inp[i]['value']);
            } else{
                rObject[tmp] = [];
                rObject[tmp].push(inp[i]['value']);
            }
        } else{
            rObject[inp[i]['name']] = inp[i]['value'];
        }
    }
    return rObject;
}

请记住将$(this).serializeArray();的输出传递给它,否则它将不起作用。

答案 34 :(得分:1)

这是使用 reduce 的单线。 Reduce是一个功能函数,它接受传递的函数的返回值,并在下一次迭代中将其与列表中的第n个值一起传递回传递的函数。

$('#formid').serializeArray().reduce((o,p) => ({...o, [p.name]: p.value}))

我们必须使用一些技巧来使它起作用:

  • ...o(扩展语法)插入来自key: value的所有o
  • 包装我们在()中返回的对象,以使其与表示功能的{}区别
  • p.name中包装密钥([]

答案 35 :(得分:1)

更现代的方法是以这种方式使用reduce serializeArray()

$('#formid').serializeArray()
    .reduce((a, x) => ({ ...a, [x.name]: x.value }), {});

这将有助于许多正常的&#39;例。

对于存在多个具有重复name属性的标记的常见实例,这还不够。

由于具有重复name属性的输入通常位于某些&#39;包装器内。 (divultr,...),就像这个例子一样:

  <div class="wrapperClass">
    <input type="text" name="one">
    <input type="text" name="two">
  </div>
  <div class="wrapperClass">
    <input type="text" name="one">
    <input type="text" name="two">
  </div>

可以使用reduce map运算符来迭代它们:

$(".wrapperClass").map(function () {
  return $(this).find('*').serializeArray()
    .reduce((a, x) => ({ ...a, [x.name]: x.value }), {});
}).get();

结果将是以下格式的对象数组:

  [
    {
      one: valueOfOne,
      two: valueOfTwo
    }, {
      one: valueOfOne,
      two: valueOfTwo
    }
  ]

.get()运算符与map结合使用以获取基本数组而不是jQuery对象,从而提供更清晰的结果。 jQuery docs

答案 36 :(得分:1)

如果要将表单转换为javascript对象,那么最简单的解决方案(此时)是使用jQuery的eachserializeArray函数方法。

$.fn.serializeObject = function() {

  var form = {};
  $.each($(this).serializeArray(), function (i, field) {
    form[field.name] = field.value || "";
  });

  return form;
};

在GitHub上托管的插件:
https://github.com/tfmontague/form-object/blob/master/README.md

可与Bower一起安装:
bower install git://github.com/tfmontague/form-object.git

答案 37 :(得分:1)

如果您要发送带有JSON的表单,则必须在发送字符串时删除[]。您可以使用jQuery函数serializeObject():

来实现
var frm = $(document.myform);
var data = JSON.stringify(frm.serializeObject());

$.fn.serializeObject = function() {
    var o = {};
    //var a = this.serializeArray();
    $(this).find('input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select').each(function() {
        if ($(this).attr('type') == 'hidden') { //If checkbox is checked do not take the hidden field
            var $parent = $(this).parent();
            var $chb = $parent.find('input[type="checkbox"][name="' + this.name.replace(/\[/g, '\[').replace(/\]/g, '\]') + '"]');
            if ($chb != null) {
                if ($chb.prop('checked')) return;
            }
        }
        if (this.name === null || this.name === undefined || this.name === '')
            return;
        var elemValue = null;
        if ($(this).is('select'))
            elemValue = $(this).find('option:selected').val();
        else
            elemValue = this.value;
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(elemValue || '');
        }
        else {
            o[this.name] = elemValue || '';
        }
    });
    return o;
}

答案 38 :(得分:0)

这使用 foreach 方法迭代由 serializeArray 返回的名称和值对,然后使用名称作为键返回一个对象。

// Feature Collection
type FeatureCollection struct {
    ID       string    `json:"_id,omitempty" bson:"_id,omitempty"`
    Features []Feature `json:"features" bson:"features"`
    Type     string    `json:"type" bson:"type"`
}

// Individual Feature
type Feature struct {
    Type       string     `json:"type" bson:"type"`
    Properties Properties `json:"properties" bson:"properties"`
    Geometry   Geometry   `json:"geometry" bson:"geometry"`
}

// Feature Properties
type Properties struct {
    Name        string `json:"name" bson:"name"`
    Height      uint64 `json:"height" bson:"height"`
    Purchased   bool   `json:"purchased" bson:"purchased"`
    LastUpdated string `json:"last_updated" bson:"last_updated"`
}

// Feature Geometry
type Geometry struct {
    Type        string      `json:"type" bson:"type"`
    Coordinates interface{} `json:"coordinates" bson:"coordinates"`
}

答案 39 :(得分:0)

这是一种非jQuery方式:

    var getFormData = function(form) {
        //Ignore the submit button
        var elements = Array.prototype.filter.call(form.elements, function(element) {
            var type = element.getAttribute('type');
            return !type || type.toLowerCase() !== 'submit';
        });

你可以像这样使用它:

function() {

    var getFormData = function(form) {
        //Ignore the submit button
        var elements = Array.prototype.filter.call(form.elements, function(element) {
            var type = element.getAttribute('type');
            return !type || type.toLowerCase() !== 'submit';
        });

        //Make an object out of the form data: {name: value}
        var data = elements.reduce(function(data, element) {
            data[element.name] = element.value;
            return data;
        }, {});

        return data;
    };

    var post = function(action, data, callback) {
        var request = new XMLHttpRequest();
        request.onload = callback;
        request.open('post', action);
        request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        request.send(JSON.stringify(data), true);
        request.send();
    };

    var submit = function(e) {
        e.preventDefault();
        var form = e.target;
        var action = form.action;
        var data = getFormData(form);
        //change the third argument in order to do something
        //more intersting with the response than just print it
        post(action, data, console.log.bind(console));
    }

    //change formName below
    document.formName.onsubmit = submit;

})();

答案 40 :(得分:0)

这可以处理多个选择甚至具有相同名称的元素:

$.fn.formToJSON = function(){
    pairStr=this.serialize();
    let rObj={};
    pairStr.split(`&`).forEach((vp)=> {
        prop=vp.split(`=`)[0];
        val=vp.split(`=`)[1];
        if(rObj.hasOwnProperty(prop)) {
            if (Array.isArray(rObj[prop])) {
                rObj[prop].push(val);
            } else {
                rObj[prop]=[rObj[prop]];
                rObj[prop].push(val);
            }
        } else {
            rObj[prop]=val;
        }
    });
    return JSON.stringify(rObj);
}

答案 41 :(得分:0)

function serializedArray2Object(array){
    let obj = {};
    array.forEach(function(item){
        if(obj[item['name']] === undefined){
            obj[item['name']] = item['value'];
        }else if(Array.isArray(obj[item['name']])){
            obj[item['name']] = [...obj[item['name']],item['value']]
        }else{
            obj[item['name']] = [obj[item['name']],item['value']];
        }
    });
    return obj;
}

使用

serializedArray2Object($('#form').serializeArray())

我刚刚从 jQuery 中发现了这个函数,并写了一个转换器到对象,这样数组就变成了一个对象。

答案 42 :(得分:0)

此代码转换并保存输入类型,而不是全部转换为字符串:

jQuery.fn.serializeForm = function () {
    var form = this.get(0);
    var i = [];
    var ret = {};
    for (i = form.elements.length - 1; i >= 0; i = i - 1) {
        if (form.elements[i].name === "") {
            continue;
        }
        var name = form.elements[i].name;
        switch (form.elements[i].nodeName) {
            case 'INPUT':
                switch (form.elements[i].type) {
                    case 'text':
                    case 'tel':
                    case 'email':
                    case 'hidden':
                    case 'password':
                        ret[name] = encodeURIComponent(form.elements[i].value);
                        break;
                    case 'checkbox':
                    case 'radio':
                        ret[name] = form.elements[i].checked;
                        break;
                    case 'number':
                        ret[name] = parseFloat(form.elements[i].value);
                        break;
                }
                break;
            case 'SELECT':
            case 'TEXTAREA':
                ret[name] = encodeURIComponent(form.elements[i].value);
                break;
        }
    }
    return ret;
};

例如这是输出:

Day: 13
Key: ""
Month: 5
OnlyPayed: true
SearchMode: "0"
Year: 2021

代替

Day: "13"
Key: ""
Month: "5"
OnlyPayed: "true"
SearchMode: "0"
Year: "2021"

答案 43 :(得分:0)

您可能不需要 jQuery 来完成此任务。 FormData 是一个完美的解决方案。

这里是使用 FormData 收集输入值,并使用 dot-prop 将值转换为嵌套对象的代码。

CodeSandbox Demo

答案 44 :(得分:0)

此代码对我有用:

class GmailFarming:
    
    def __init__(self, parent, controller):
        self.__startSeleniumScript()
        
    def __startSeleniumScript(self):
        self.foo = 1
        self.bar = 2
    
g = GmailFarming(None,None)
print(g.foo)
print(g.bar)

答案 45 :(得分:0)

serialize函数将JSON对象作为参数并返回serialize String。

function serialize(object) {
            var _SPECIAL_CHARS = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, _CHARS = {
                '\b' : '\\b',
                '\t' : '\\t',
                '\n' : '\\n',
                '\f' : '\\f',
                '\r' : '\\r',
                '"' : '\\"',
                '\\' : '\\\\'
            }, EMPTY = '', OPEN_O = '{', CLOSE_O = '}', OPEN_A = '[', CLOSE_A = ']', COMMA = ',', COMMA_CR = ",\n", CR = "\n", COLON = ':', space = "", COLON_SP = ': ', stack = [], QUOTE = '"';
            function _char(c) {
                if (!_CHARS[c]) {
                    _CHARS[c] = '\\u' + ('0000' + (+(c.charCodeAt(0))).toString(16))
                        .slice(-4);
                }
                return _CHARS[c];
            }
            function _string(s) {
                return QUOTE + s.replace(_SPECIAL_CHARS, _char) + QUOTE;
                // return str.replace('\"','').replace('\"','');
            }

            function serialize(h, key) {
                var value = h[key], a = [], colon = ":", arr, i, keys, t, k, v;
                arr = value instanceof Array;
                stack.push(value);
                keys = value;
                i = 0;
                t = typeof value;
                switch (t) {
                    case "object" :
                        if(value==null){
                            return null;
                        }
                        break;
                    case "string" :
                        return _string(value);
                    case "number" :
                        return isFinite(value) ? value + EMPTY : NULL;
                    case "boolean" :
                        return value + EMPTY;
                    case "null" :
                        return null;
                    default :
                        return undefined;
                }
                arr = value.length === undefined ? false : true;

                if (arr) { // Array
                    for (i = value.length - 1; i >= 0; --i) {
                        a[i] = serialize(value, i) || NULL;
                    }
                }
                else { // Object
                    i = 0;
                    for (k in keys) {
                        if (keys.hasOwnProperty(k)) {
                            v = serialize(value, k);
                            if (v) {
                                a[i++] = _string(k) + colon + v;
                            }
                        }
                    }
                }

                stack.pop();
                if (space && a.length) {

                    return arr
                        ? "[" + _indent(a.join(COMMA_CR), space) + "\n]"
                        : "{\n" + _indent(a.join(COMMA_CR), space) + "\n}";
                }
                else {
                    return arr ? "[" + a.join(COMMA) + "]" : "{" + a.join(COMMA)
                        + "}";
                }
            }
            return serialize({
                "" : object
            }, "");
        }

答案 46 :(得分:0)

上面的Tobias解决方案是正确的,但是,正如评论者@macek指出的那样,它不处理类型为foo [bar]的输入并将它们拆分为子对象。

这是一个仅限PHP的功能,但我仍然觉得能够在JavaScript中生成相同的结构非常有用。

我只是简单地修改了上面的Tobias代码,所以所有功劳都归功于他。这可能会变得更干净,但我只是在五分钟内掀起它并认为它可能有用。

此时它不处理多维数组或数字索引数组。也就是说,它只适用于名称foo [bar]而不是foo []。

jQuery.fn.serializeObjectPHP = function()
{
    var o = {};
    var re = /^(.+)\[(.*)\]$/;
    var a = this.serializeArray();
    var n;
    jQuery.each(a, function() {
        var name = this.name;
        if ((n = re.exec(this.name)) && n[2]) {
            if (o[n[1]] === undefined) {
                o[n[1]] = {};
                o[n[1]][n[2]] = this.value || '';
            } else if (o[n[1]][n[2]] === undefined) {
                o[n[1]][n[2]] = this.value || '';
            } else {
                if(!o[n[1]][n[2]].push) {
                    o[n[1]][n[2]] = [ o[n[1]][n[2]] ];
                }
                o[n[1]][n[2]].push(this.value || '');
            }
        } else {
            if (n && !n[2]) {
                name = n[1];
            }
            if (o[name] !== undefined) {
                if (!o[name].push) {
                    o[name] = [o[name]];
                }
                o[name].push(this.value || '');
            } else {
                o[name] = this.value || '';
            }
        }
    });
    return o;
};

答案 47 :(得分:0)

这是对Tobias Cohen函数的改进,它适用于多维数组:

http://jsfiddle.net/BNnwF/2/

然而,这不是一个jQuery插件,但如果你想以这种方式使用它只需要几秒钟就可以使用它:只需替换函数声明包装器:

function serializeFormObject(form)
{
    ...
}

使用:

$.fn.serializeFormObject = function()
{
    var form = this;
    ...
};

我想它与macek的解决方案类似,它做同样的事情,但我认为这有点清洁和简单。我还将macek的测试用例输入到小提琴中,并添加了一些额外的。到目前为止,这对我很有用。

function serializeFormObject(form)
{
    function trim(str)
    {
        return str.replace(/^\s+|\s+$/g,"");
    }

    var o = {};
    var a = $(form).serializeArray();
    $.each(a, function() {
        var nameParts = this.name.split('[');
        if (nameParts.length == 1) {
            // New value is not an array - so we simply add the new
            // value to the result object
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        }
        else {
            // New value is an array - we need to merge it into the
            // existing result object
            $.each(nameParts, function (index) {
                nameParts[index] = this.replace(/\]$/, '');
            });

            // This $.each merges the new value in, part by part
            var arrItem = this;
            var temp = o;
            $.each(nameParts, function (index) {
                var next;
                var nextNamePart;
                if (index >= nameParts.length - 1)
                    next = arrItem.value || '';
                else {
                    nextNamePart = nameParts[index + 1];
                    if (trim(this) != '' && temp[this] !== undefined)
                        next = temp[this];
                    else {
                        if (trim(nextNamePart) == '')
                            next = [];
                        else
                            next = {};
                    }
                }

                if (trim(this) == '') {
                    temp.push(next);
                } else
                    temp[this] = next;

                temp = next;
            });
        }
    });
    return o;
}

答案 48 :(得分:0)

Javascript / jQuery单行代码-还可在较旧版本上使用(ES6之前的版本):

$('form').serializeArray().reduce((f,c) => {f[c['name']]=(f[c['name']])?[].concat(f[c['name']],c['value']):c['value']; return f}, {} );

答案 49 :(得分:0)

我的库中的代码 phery 得到了一个序列化例程,可以处理非常复杂的表单(比如在演示https://github.com/pocesar/phery/blob/master/demo.php#L1664中),并且它不是一个适合所有人的。它实际上检查每个字段的类型。例如,一个无线电盒与一个范围不同,它与keygen不同,与select multiple不同。我的功能涵盖了所有,你可以看到 它在https://github.com/pocesar/phery/blob/master/phery.js#L1851

serializeForm:function (opt) {
    opt = $.extend({}, opt);

    if (typeof opt['disabled'] === 'undefined' || opt['disabled'] === null) {
        opt['disabled'] = false;
    }
    if (typeof opt['all'] === 'undefined' || opt['all'] === null) {
        opt['all'] = false;
    }
    if (typeof opt['empty'] === 'undefined' || opt['empty'] === null) {
        opt['empty'] = true;
    }

    var
        $form = $(this),
        result = {},
        formValues =
            $form
                .find('input,textarea,select,keygen')
                .filter(function () {
                    var ret = true;
                    if (!opt['disabled']) {
                        ret = !this.disabled;
                    }
                    return ret && $.trim(this.name);
                })
                .map(function () {
                    var
                        $this = $(this),
                        radios,
                        options,
                        value = null;

                    if ($this.is('[type="radio"]') || $this.is('[type="checkbox"]')) {
                        if ($this.is('[type="radio"]')) {
                            radios = $form.find('[type="radio"][name="' + this.name + '"]');
                            if (radios.filter('[checked]').size()) {
                                value = radios.filter('[checked]').val();
                            }
                        } else if ($this.prop('checked')) {
                            value = $this.is('[value]') ? $this.val() : 1;
                        }
                    } else if ($this.is('select')) {
                        options = $this.find('option').filter(':selected');
                        if ($this.prop('multiple')) {
                            value = options.map(function () {
                                return this.value || this.innerHTML;
                            }).get();
                        } else {
                            value = options.val();
                        }
                    } else {
                        value = $this.val();
                    }

                    return {
                        'name':this.name || null,
                        'value':value
                    };
                }).get();

    if (formValues) {
        var
            i,
            value,
            name,
            $matches,
            len,
            offset,
            j,
            fields;

        for (i = 0; i < formValues.length; i++) {
            name = formValues[i].name;
            value = formValues[i].value;

            if (!opt['all']) {
                if (value === null) {
                    continue;
                }
            } else {
                if (value === null) {
                    value = '';
                }
            }

            if (value === '' && !opt['empty']) {
                continue;
            }

            if (!name) {
                continue;
            }

            $matches = name.split(/\[/);

            len = $matches.length;

            for (j = 1; j < len; j++) {
                $matches[j] = $matches[j].replace(/\]/g, '');
            }

            fields = [];

            for (j = 0; j < len; j++) {
                if ($matches[j] || j < len - 1) {
                    fields.push($matches[j].replace("'", ''));
                }
            }

            if ($matches[len - 1] === '') {
                offset = assign_object(result, fields, [], true, false, false);

                if (value.constructor === Array) {
                    offset[0][offset[1]].concat(value);
                } else {
                    offset[0][offset[1]].push(value);
                }
            } else {
                assign_object(result, fields, value);
            }
        }
    }

    return result;
}

它是我的库 phery 的一部分,但它可以移植到您自己的项目中。它创建了应该有数组的数组,它从select,normalize复选框选项中获取正确的选项等。如果你想将它转换为JSON(一个真正的JSON字符串),只需做JSON.stringify($('form').serializeForm());

答案 50 :(得分:0)

此解决方案更好。如果未选中该复选框,则此处的一些更受欢迎的选项不会更正句柄复选框。

       getData: function(element){
      //@todo may need additional logic for radio buttons
      var select = $(element).find('select');
      var input = $(element).find('input');
      var inputs = $.merge(select,input);
      var data = {};
      //console.log(input,'input');
      $.each(inputs,function(){
        if($(this).attr('type') != undefined){
          switch($(this).attr('type')){
            case 'checkbox':
              data[$(this).attr('name')] = ( ($(this).attr('checked') == 'checked') ? $(this).val():0 );
              break;
            default:
              data[$(this).attr('name')] = $(this).val();
              break;
          }
        }
        else{
          data[$(this).attr('name')] = $(this).val();
        }
      })
      return data;
   }

答案 51 :(得分:0)

我编写了一个jQuery模块jsForm,即使对于非常复杂的表单也可以执行此双向模式(允许集合和其他更复杂的结构)。

它使用字段的名称(加上一些特殊的集合类)并匹配JSON对象。它允许自动复制DOM元素以进行收集和数据处理:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="https://raw.github.com/corinis/jsForm/master/src/jquery.jsForm.js"></script>
        <script>
        $(function(){
            // Some JSON data
            var jsonData = {
                name: "TestName",   // Standard inputs
                description: "long Description\nMultiline", // Textarea
                links: [{href:'http://stackoverflow.com',description:'StackOverflow'}, {href:'http://www.github.com', description:'GitHub'}],   // Lists
                active: true,   // Checkbox
                state: "VISIBLE"    // Selects (enums)
            };

            // Initialize the form, prefix is optional and defaults to data
            $("#details").jsForm({
                data:jsonData
            });

            $("#show").click(function() {
                // Show the JSON data
                alert(JSON.stringify($("#details").jsForm("get"), null, " "));
            });
        });
        </script>
    </head>
    <body>
        <h1>Simpel Form Test</h1>
        <div id="details">
            Name: <input name="data.name"/><br/>
            <input type="checkbox" name="data.active"/> active<br/>
            <textarea name="data.description"></textarea><br/>
            <select name="data.state">
                <option value="VISIBLE">visible</option>
                <option value="IMPORTANT">important</option>
                <option value="HIDDEN">hidden</option>
            </select>
            <fieldset>
                <legend>Links</legend>
                <ul class="collection" data-field="data.links">
                    <li><span class="field">links.description</span> Link: <input name="links.href"/> <button class="delete">x</button></li>
                </ul>
            </fieldset>
            <button class="add" data-field="data.links">add a link</button><br/>
            Additional field: <input name="data.addedField"/>
        </div>
        <button id="show">Show Object</button>
    </body>
</html>

答案 52 :(得分:0)

我最近遇到了同样的问题所以我开发了一个函数,允许解析表单的控件以获取控件ID /值并将其转换为JSON。

它足够灵活,可以添加更多控件。您只需指定控件类型和要解释为值的属性。

您可以找到the full script here

优点是它只需要实际需要的数据,而无需拖动整个对象。

缺点是,如果您有嵌套选项,则需要相应地为ID添加前缀,以便可以对其特定组使用重复选项。

我希望这有帮助!

答案 53 :(得分:0)

我不得不无耻地自我宣传我的表格库。

transForm.js

它可以执行以下操作:序列化,反序列化,清除&amp;提交表格。

我之所以这样做是因为form2js / js2form没有得到维护,也没有那么灵活。我希望快。我们在生产中使用它,因为这是form2js / js2form兼容。

答案 54 :(得分:-1)

创建地图并循环所有字段,保存其值。

var params = {};
$("#form").find("*[name]").each(function(){
    params[this.getAttribute("name")] = this.value;
});

答案 55 :(得分:-1)

此函数返回转换为正确类型的所有值;

bool / string /(整数/浮点数)可能

你有点需要jQuery,但是因为serializeArray也是jQuery,所以没什么大不了的。

theScrollView.contentSize = CGSizeMake(width, height)

答案 56 :(得分:-7)

使用此:

var sf = $('#mainForm').serialize(); // URL encoded string
sf = sf.replace(/"/g, '\"');         // Be sure all "s are escaped
sf = '{"' + sf.replace(/&/g, '","'); // Start "object", replace tupel delimiter &
sf = sf.replace(/=/g, '":"') + '"}'; // Replace equal sign, add closing "object"

// Test the "object"
var formdata = eval("(" + sf + ")"); 
console.log(formdata);

即使在非常复杂的形式上,它也像魅力一样。