Jquery - 按 ID 的 SerializeArray()答案

【问题标题】：Jquery - SerializeArray() by IDJquery - 按 ID 的 SerializeArray()
【发布时间】：2012-08-22 15:22:26
【问题描述】：

我有这个问题，我使用serializearray() jquery将Form的所有字段序列化为Json。如果在输入中输入 name 属性，它可以正常工作，但如果我只想输入 ID 属性，它不起作用。

按名称[name is similar: '#myformnameid']的好函数：

function formToJson(nameForm)
{
 var jsonForm={};
 var queryFrom = $(nameForm).serializeArray();

 for (i in queryFrom) {
   jsonForm[queryFrom[i].name] = queryFrom[i].value;
  }
 return jsonForm;
}

我尝试了使用 attr 的 ID 解决方案。

function formToJson(nameForm)
{
 var jsonForm={};
 var queryFrom = $(nameForm).serializeArray();

 for (i in queryFrom) {
   jsonForm[queryFrom[i].attr("id")] = queryFrom[i].value;
  }
 return jsonForm;
}

有什么想法吗？

【问题讨论】：

标签： jquery json serializearray

【解决方案1】：

serializeArray 所做的是将表单输入对象转换为 javascript 对象数组。来自documentation，形式类似

[
  {
    name: "a",
    value: "1"
  },
  {
    name: "b",
    value: "2"
  },
  {
    name: "c",
    value: "3"
  }    
]

您可以按名称或值遍历此数组，就像您正在做的那样，它将返回正确的数据。

您遇到的问题是您不再对实际元素进行迭代，而只是对来自这些元素的数据进行迭代。如果您想遍历元素，您需要执行以下操作：

function formToJson(nameForm)
{
 var jsonForm={};
 $("input", $(nameForm)).each(function(index){
   jsonForm[$(this).attr("id")] = this.value;
 })
 return jsonForm;
}

【讨论】：

【解决方案2】：

这是一个旧帖子，但我想我会添加我的想法。从下面的链接复制源代码，您将能够将您想要的任何元素属性添加到返回的数组中。这样你的实现就是 jQuery 的。是的，如果更新了 jQuery 源代码，您将需要手动更新代码，但这与提出的其他解决方案相同。

https://searchcode.com/codesearch/view/25323764/

var
  rbracket = /\[\]$/,
  rCRLF = /\r?\n/g,
  rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,
  rsubmittable = /^(?:input|select|textarea|keygen)/i,
  rcheckableType = /^(?:checkbox|radio)$/i;

$.fn.extend({
  customSerializeArray: function() {
    return this.map(function() {

      // Can add propHook for 'elements' to filter or add form elements
      var elements = $.prop(this, 'elements');
      return elements ? $.makeArray(elements) : this;
    })
    .filter(function() {
      var type = this.type;

      // Use .is(':disabled') so that fieldset[disabled] works
      return this.name && !$(this).is(':disabled') &&
        rsubmittable.test(this.nodeName) && !rsubmitterTypes.test(type) &&
        (this.checked || !rcheckableType.test(type));
    })
    .map(function(i, elem) {
      var val = $(this).val();

      if (val == null) {
        return null;
      }

      if ($.isArray(val)) {
        return $.map(val, function(val) {
          return { name: elem.name, value: val.replace(rCRLF, '\r\n') };
        });
      }

      return { name: elem.name, value: val.replace(rCRLF, '\r\n') };
    }).get();
  }
});

【讨论】：