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


1624

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

我希望有一些方法可以自动从表单中构建JavaScript对象,而不必遍历每个元素。我不想要由返回的字符串,$('#formid').serialize();也不希望由返回的映射$('#formid').serializeArray();


16
因为第一个返回一个字符串,就像您使用GET方法提交表单时得到的字符串一样,第二个返回一个对象数组,每个对象都有一个名称/值对。我希望如果我有一个名为“ email”的字段,我会得到一个对象,该对象将允许我使用obj.email检索该值。使用serializeArray(),我必须做类似obj [indexOfElement] .value的事情
Yisroel

2
@James-使用D.Crockford的JSON-js库的可接受答案。这里有一个例子:github.com/tleese22/google-app-engine-jappstart/blob/master/src/...
泰勒·利斯

4
@Taylor是的,我想说正确的答案使用Crockford的lib和Tobias函数,如下所示:JSON.stringify($('myForm')。serializeObject())
James McCormack 2010年

5
@Jonz-除了使用表单元素进行提交/传输外,还有其他原因。如果您要对JavaScript中的表单值(例如单页应用程序)进行繁重的工作,将它们设置为用于访问和操作的对象格式非常方便。同样,HTTP Post和Get查询字符串并不是移动数据的唯一格式。
Patrick M

3
我遇到的一个不错的js >> github.com/marioizquierdo/jquery.serializeJSON
鸣叫

Answers:


1657

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

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


4
正如tvanfosson所说,为什么要对集合进行两次迭代?
伊斯洛尔

69
您的意思是“为什么要首先使用serializeArray来获取数据?” 由于serializeArray已经编写,因此已在多个浏览器中进行了单元测试,并且在理论上可以在更高版本的jQuery中进行改进。您编写的代码可以直接访问诸如DOM元素之类的不一致内容的代码越少,代码的稳定性就越高。
Tobias Cohen

56
警告,serializeArray()将不包含禁用的元素。我经常禁用与页面上其他元素同步的输入元素,但是我仍然希望它们包含在序列化对象中。$.map( $("#container :input"), function(n, i) { /* n.name and $(n).val() */ } );如果需要包含禁用的元素,最好使用类似的东西。
塞缪尔·梅亚姆

22
@TobiasCohen它不foo[bar]按预期处理-type输入,更不用说其他大多数输入名称变体了。在对这个问题的浅层解决方案感到非常沮丧之后,我最终编写了自己的jQuery插件-有关此问题的详细信息。
maček

6
@macek我知道这已经有几个月了,但是从什么时候开始数组才使用非数字索引?没有人应该命名输入foo [bar]并希望将其视为数组。您会混淆数组和哈希值吗?是的,[]通常被理解为访问器,而不仅仅是数组。也说这是有效的HTML,但在HTML规范中却不是一个矛盾。是的,浏览器可能无法满足要求,但是没有多少网络服务器会像阵列一样知道如何反序列化。为什么?因为它不在HTML规范中。因此,这确实是无效的。
kroehre 2012年

446

像老板一样将表单转换为JSON


当前来源在GitHubBower上

$ bower安装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);

17
因此,效果很好。但是它的名字是错误的:顾名思义,它不返回JSON。相反,它返回对象文字。另外,检查hasOwnProperty也很重要,否则您的数组将附加任何与原型相关的内容,例如:{numbers:[“ 1”,“ 3”,indexOf:function(){...}]}
frontendbeauty

5
实际上@ frontendbeauty,toJSON正是规范所说的名称:developer.mozilla.org/en/JSON#toJSON() _method是一个不幸的错误称呼。
瑞安·佛罗伦萨

4
@Marek,我在jsfiddle为此进行了测试。诀窍是正确命名您的选择。<select name="foo" multiple="multiple">在任何情况下均不起作用。但是,如果你使用[],如<select name="bar[]" multiple="multiple">,它会工作得很好:)
maček

3
想要指出的是,github.com/serbanghita/formToObject是一种类似的JavaScript方法(不需要第三者库),可以完成相同的工作。支持“多个”,忽略“禁用”元素。
banerban GhiȘă 2013年

8
此解决方案应该放在最前面,因为它可以解决嵌套键作为表单元素名称的问题。
SquareCat 2014年

283

有什么问题:

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

2
@LayZee-如果未选择任何内容,为什么要在后端使用它?如果必须选择一个选项,请在序列化之前验证输入。
Dementic 2014年

21
如果您什么也不退货,为什么不使用.each而不是.map???
azerafati 2014年

10
它是如此简单,因为它非常幼稚...不处理具有相同名称的复选框。每次它将覆盖之前的已选中项目。您肯定需要一些输入类型检测以确保其正确序列化。
Joshua F. Rountree 2015年

5
如果您需要纯jQuery解决方案,则可以使用var form = {}; $.each($(this).serializeArray(), function (i, field) { form[field.name] = field.value || ""; });
tfmontague

42
$(this).serializeArray().reduce(function(m,o){ m[o.name] = o.value; return m;}, {})
网站

103

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

在咖啡脚本中,可以将第一段if缩短为value = @value ? ''
nzifnab 2012年

而且,如果您要序列化类似Rails的表单,则可能要从生成的键中删除元素根。为了实现这一点,我添加了一个新的参数keyMap和以下行:key = if keyMap? then keyMap(@name) else @name。现在,您可以传递类似的映射功能(name) -> name.match(/\[([^\]]+)]/)[1]。再一个需要改变所有后续@namekey,当然
达米尔Zekić

@DamirZekić,如果您的根本原因是post,您可以做$('form').serializeObject().post。无需花哨的映射。
maček

@DamirZekić这条线在做什么?if (!objectData[this.name].push)??
kittu

@kittu正在检查是否objectData[this.name]具有push方法(大概是数组)。如果它是一个数组,它将推入该值;如果它不是一个数组,则将其转换为一个数组,以便将具有相同键的多个值组合到一个数组中。
Daniel X Moore

63

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

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

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

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


这很优雅。但值得注意的array.prototype.reduce()是,它是ECMAScript 5规范的一部分,在IE8中不可用。因此,如果您需要IE8支持,则将要完全使用polyfill或其他解决方案。
gfullam 2015年

3
是的,但是填充很容易。此外,由于Microsoft在IE11企业模式方面的出色工作,IE8的头痛几乎已经过去了-我不再迎合使用IE8的个人用户的需要,但是当一个拥有10,000名员工并且全部使用IE8的组织出现时...情况就不同了。幸运的是,微软正在努力解决这个问题。
伊桑·布朗

1
好吧,您应该让IT人员了解IE11企业模式-它提供了现代的浏览器以及一种运行IE8兼容应用程序的方式。微软方面的明智之举
伊桑·布朗

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

4
尽管不处理嵌套的表单数据,这就是答案变得更加复杂的原因。
frontendbeauty

对我来说很棒。只需要存储键值对;字符串化然后保存到localStorage或cookie只是花花公子。
格雷格·佩蒂特

23

如果不检查每个元素,实际上是没有办法做到的。您真正想知道的是“其他人是否已经编写了将表单转换为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;
}

是的,我很想为我做一个插件。名称的限制并不重要。这会以表格的形式拉出所有字段,包括textareas和selects吗?
伊斯洛尔

不知道您是否要考虑[已禁用],但我认为不应该发送/选择。
meder omuraliev 2009年

使用serializeArray()来获取地图可能更简单,然后使用与上述类似的代码将其转换为普通的JSON对象,这样我就不会处理表单本身
Yisroel

2
使用serializedArray可以工作,但是实际上您将遍历集合两次-一次生成数组,然后遍历数组。我认为没有必要。
tvanfosson 2009年

我将选择器调整为启用/禁用。
tvanfosson 2009年

23

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

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

19

我检查了所有其他答案是否有问题,如果输入名称是一个数组,例如name[key],则应该这样生成:

name:{ key : value }


例如:如果您的HTML表单类似于以下表单:

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

但是它应该像下面的JSON一样生成,并且不会与其他所有答案一样成为以下对象。因此,如果有人想带来类似以下JSON的内容,请尝试以下JS代码。

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

$.fn.getForm2obj = function() {
  var _ = {};
  $.map(this.serializeArray(), function(n) {
    const keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g);
    if (keys.length > 1) {
      let tmp = _;
      pop = keys.pop();
      for (let i = 0; i < keys.length, j = keys[i]; i++) {
        tmp[j] = (!tmp[j] ? (pop == '') ? [] : {} : tmp[j]), tmp = tmp[j];
      }
      if (pop == '') tmp = (!Array.isArray(tmp) ? [] : tmp), tmp.push(n.value);
      else tmp[pop] = n.value;
    } else _[keys.pop()] = n.value;
  });
  return _;
}
console.log($('form').getForm2obj());
$('form input').change(function() {
  console.clear();
  console.log($('form').getForm2obj());
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<form>
  <input name="name" value="value">
  <input type="checkbox" name="name1[]" value="1" checked="checked">1
  <input type="checkbox" name="name1[]" value="2">2
  <input type="checkbox" name="name1[]" value="3">3<br>
  <input type="radio" name="gender" value="male" checked="checked">male
  <input type="radio" name="gender" value="female"> female
  <input name="name2[key1]" value="value1">
  <input name="one[another][another_one]" value="value4">
  <input name="name3[1][name]" value="value4">
  <input name="name3[2][name]" value="value4">
  <input name="[]" value="value5">
</form>


此答案确实涵盖了上述情况,但并未涵盖诸如checkbox []或什至一个[another] [another_one]的情况
Leonardo Beal

1
@LeonardoBeal我修复了我的问题..现在检查此..!
巴维克·希拉尼

我是拒绝投票的人,我拒绝投票eval是因为不应以这种方式使用,因为eval当以这种方式使用时,它们会提倡极其不可靠的,有漏洞的,不良的以及可能不安全的做法。
杰克·吉芬

2
我不同意这是一个好答案。并且,当您编写答案时,请使您的代码不言自明或对其进行解释。this.c = function(k,v){ eval("c = typeof "+k+";"); if(c == 'undefined') _t.b(k,v);}简短而又不能解释。经验不足的开发人员只会在不了解其原因和工作方式的情况下复制它。
iRaS

2
@JackGiffin现在检查我的新代码,因为我已经eval()从代码中删除了它。
Bhavik Hirani的

17

好的,我知道这已经得到了高度评​​价,但是最近又提出了另一个类似的问题,我也直接针对这个问题。我也想提供我的解决方案,因为它比公认的解决方案具有优势:您可以包括禁用的表单元素(有时很重要,具体取决于您的UI的功能)

这是我对另一个SO问题的回答

最初,我们使用的是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。


6
我在一个项目中尝试过使用map这样的方法创建具有单个属性的对象数组,它不会将所有属性都折叠为一个对象。
joshperry

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

15

你可以这样做:

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

参见JSON


14

单行代码(除了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" }

适用于渐进式Web应用程序(一个可以轻松地支持常规表单提交操作以及Ajax请求)


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

7

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

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

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

7

从一些较旧的答案:

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

据我所知,区别在于您的解决方案不依赖于serializeArray任何解决方案,因此您可以自由选择所需的任何输入(例如,可以包括禁用的输入),对吗?也就是说,这与任何形式或提交事件都没有关联,它本身就是独立的吗?
dvtan

链接答案的唯一小区别是,无需实例化数据就可以reduce返回对象。这不是独立的,因为toArray它来自jQuery。
网站

6

我发现Tobias Cohen的代码有问题(我没有足够的要点直接对其进行评论),否则对我有用。如果您有两个具有相同名称的选择选项,且两个都具有value =“”,则原始代码将产生“ 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;
};

6

使用maček的解决方案,我对其进行了修改,使其可以与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" />



4
const formData = new FormData(form);

let formDataJSON = {};

for (const [key, value] of formData.entries()) {

    formDataJSON[key] = value;
}

3

我更喜欢这种方法,因为:您不必重复两个集合,如果需要,可以使用除“名称”和“值”之外的其他东西,并且可以在将值存储到对象中之前对其进行清理(例如,如果您有不想存储的默认值)。

$.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中测试过。


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

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

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

还要注意,永远不要仅使用此函数来验证表单,以收集要发送到服务器端的数据以进行验证。使用这样的弱代码和大量分配的代码将导致XSS等。


3

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

关键是您实际上可能希望构建一个表单,使其本身具有结构,因此,假设您要创建一个表单,以便用户在镇上插入他最喜欢的位置:您可以想象此表单表示一个<places>...</places>包含以下内容的XML元素:用户喜欢的位置列表,因此喜欢一个<place>...</place>元素列表,每个元素包含一个<name>...</name>元素,一个<type>...</type>元素,然后是一个元素列表,<activity>...</activity>以表示您可以在这样的位置执行的活动。因此,您的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>

有了一个JSON对象来表示这个确切的结构,这将是多么酷,因此您可以:

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

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

当然,<form>标签是root,但随后我们有了该<place>元素,它是一个容器,而不是数据元素本身,因此我们不能对其使用输入标签。

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

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

正如您在这种形式中看到的那样,我们正在打破唯一名称的规则,但这是可以的,因为它们将被转换为元素数组,因此只能由它们在数组中的索引来引用。

此时,您可以看到name="array[]"表单中没有类似的名称,并且所有内容都很漂亮,简单且具有语义。

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

{'places':{

    'place':[

        {

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

            'activity':[

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

            ]

        },

        {...},

        {...}

    ]

}}

为此,我在这里开发了这个jQuery插件,有人在Code Review线程中进行了优化,如下所示:

$.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(), ...);

我知道有很多方法可以将表单转换为JSON对象,.serialize()并且.serializeArray()可以在大多数情况下正常工作,并且大多数情况下都打算使用这种方法,但是我认为将表单作为具有有意义名称的XML结构并将其转换为格式正确的JSON对象值得一试,如果您需要检索动态生成的表单数据,那么无需担心就可以添加同名输入标签,这一点非常有用。

我希望这可以帮助别人!


你想做什么?
Onheiron


3

另一个答案

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

FormData:https : //developer.mozilla.org/zh-CN/docs/Web/API/FormData


3

[2020年更新]

使用香草js中的简单oneliner:

Object.fromEntries(new FormData(form))

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

并将其包装在数据数组中(也是通常所期望的),最后将其作为字符串发送给App.stringify({data:App.toJson('#cropform:input'}})

对于精简版本,请看问题3593046,在JSON2.js中查看所有包含所有最终事件的版本。那应该涵盖了全部:)


谢谢..这使(如您所述)微不足道但非常重要。
Adarsha

2

对于快速,现代的解决方案,请使用JSONify jQuery插件。下面的示例是从GitHub README逐字获取的。全部归功于该插件的作者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()));
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.