Question

道歉，如果在其他地方已经涉及，我无法找到任何东西

我有一个像这样的html表单：

<form>
  <div>
  First Name <input name="FirstName" type="text">
  Age <input name="Age" type="number">
  </div>

  <div>
  First Name  <input name="FirstName" type="text">
  Age <input name="Age" type="number">
  </div>

  <div>
  First Name <input name="FirstName" type="text">
  Age <input name="Age" type="number">
  </div>

  <button type="submit">Submit</button>

</form>

我有这样的jquery代码：

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        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 || '';
        }
    });
    return o;
};

$(function() {
    $('form').submit(function() {
        $('#result').text(JSON.stringify($('form').serializeObject()));
        return false;
    });
});

返回的结果如下：

{"FirstName":["tom","dick","harry"],"Age":[22,35,40]}

我希望它返回这样的结果：

[{"FirstName": "Tom","Age": 22},{"FirstName": "Dick","Age": 35},{"FirstName": "Harry","Age": 42}]

非常感谢任何人都可以帮助我，因为我是新手，并且无法告诉他们如何做到这一点

谢谢！

Answer 1

尝试逐个处理div，将$('form').serializeObject()替换为：

$('form > div')
    .map(function(){
        return $(this).find(':input').serializeObject();
    })
    .get()

Answer 2

如果您向div添加课程，可以执行以下操作：

HTML：

<div class="group">
  First Name <input name="FirstName" type="text" value="Foo">
  Age <input name="Age" type="number" value="27">
</div>

JS：

$.fn.serializeGroups=function(){
    var results=[];
    $(this).find('.group').each(function(){
        var o={};
        $(this).find('input').each(function(){
            o[this.name]=this.value;
        });
        results.push(o);        
    });
    return results;    
}

的 DEMO

假设所有输入都有name

Answer 3

您可以使用临时变量和计数器

$.fn.serializeObject = function()
{
    var o = [];
    var a = this.serializeArray();

    var count=0;
    var r = {};
    $.each(a, function() {
        r[this.name]= this.value || '';
        if( (count%2) == 1){
            o.push(r);
            r = {};
        }       
    });
    return o;
};

将带有重复元素的表单转换为JSON

3 个答案: