jquery - 序列化和serializeObject jquery之间的区别

Question

我搜索了很多，但没有找到jqueryserialize和方法之间的完美区别。serializeObject

请帮助我理解这一点。

Answer 1

正如您在此处看到的，serializeObject它不是原生的 jQuery 方法，因此只有在您或该站点的以前的程序员插入它时才存在。正如在此处找到的问答中所提到的，当有人在您的网站“ searched a way to serialize a form”上工作并发现以下扩展名时，可能会发现此功能：

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

在您的 JS 中寻找serializeObject某个地方，但请注意，它可能不需要，因为它似乎与$.fn.serialize.

---

经过进一步的审查，我发现它并不完全相同。serializeObject在其他问答中找到的方法会将表单的值序列化为对象，同时serialize将值编码为字符串以供提交。

请注意，如果您想要类似serailizeObject jQuery Core 原生的东西，请参阅serializeArray.

结果将略有不同，因为serializeArray它将生成表单值的对象数组。每个对象都有{ name: "", value: "" }

例子

^{请参见示例。Developer Tools Console}

Answer 2

我已经在stackoverflow上进行了一些关于将表单序列化为json对象的挖掘工作，最终我找到了这个方法

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

但它不适合我的工作。所以我创建了自己的插件。如果你有兴趣，你可以看看这个https://github.com/citnvillareal/serializeObject

Answer 3

$.serializeObject是现有$.serialize方法的一种变体，它不是将表单元素编码为字符串，而是将表单元素转换为JSON可在您的JavaScript应用程序中使用的有效对象。

Answer 4

我认为这是简单的方法！TODO--

$.fn.serializeObject = function () {
        var o = {};
        this.find("[name]").each(function () {
             o[this.name] = this.value;
        });
        return o;
    };

Answer 5

Vanilla JS 用于.serialize()，.serializeArray()以及.serializeObject()那些为此而来的人。

let form = document.querySelector("form");
let params = new URLSearchParams(new FormData(form)).toString(); //query string, e.g. value=name&username=john
//object
let obj = {};
params.split("&").map(function (q){let a = decodeURI(q).split("=");obj[a[0]] = a[1]});

//array
let arr = params.split("&").map(function (q){let a = decodeURI(q).split("="); return {name:a[0],value:a[1]}});

一个对象将如下所示：

{
  name: "value",
  username: "john"
}

并且数组将是

[{
   name: "name",
   value: "value"
}, {
   name: "username",
   value: "john"
}]

就个人而言，我更喜欢使用对象，因为它可以让您轻松修改数据并且可以将其发送到服务器。另一方面，如果将数组发送到服务器，则需要额外的服务器端代码将其转换为对象，或找到正确的值。