在 jQuery 中序列化为 JSON [duplicate]

Serializing to JSON in jQuery [duplicate]

提问人:Herb Caudill 提问时间:10/10/2008 最后编辑:ZachHerb Caudill 更新时间:4/19/2020 访问量:928156

问:

我需要将对象序列化JSON。我正在使用jQuery。有没有“标准”的方法可以做到这一点?

我的具体情况:我定义了一个数组,如下所示:

var countries = new Array();
countries[0] = 'ga';
countries[1] = 'cd';
...

我需要把它变成一个字符串来传递给$.ajax(),如下所示:

$.ajax({
    type: "POST",
    url: "Concessions.aspx/GetConcessions",
    data: "{'countries':['ga','cd']}",
...
JavaScript jQuery Ajax JSON 序列化

评论

22赞 mpen 6/3/2011
没有人指出这是变量的名称,而不是键......当您尝试序列化该信息时,该信息将丢失。countries
6赞 Bodman 9/4/2011
是的。。需要是 JSON.stringify({countries:countries})
2赞 CommaToast 1/8/2013
angular.js 有:angular.fromJson 和 angular.toJson ...因此,如果您已经在使用 Angular,这很棒,那么 woot
0赞 Suraj Roy 7/16/2016
stackoverflow.com/questions/38408348/......

答:

47赞 Tahir Akhtar 10/10/2008 #1

我没有使用过它,但你可能想尝试一下 Mark Gibson 编写的 jQuery 插件

它添加了两个函数:、。$.toJSON(value)$.parseJSON(json_str, [safe])

评论

20赞 Marnen Laibow-Koser 7/6/2012
请注意,它现在位于 jQuery 核心中。$.parseJSON
37赞 Adam Bellaire 10/10/2008 #2

否,序列化为 JSON 的标准方法是使用现有的 JSON 序列化库。如果您不想这样做,那么您将不得不编写自己的序列化方法。

如果你需要有关如何执行此操作的指导,我建议您检查一些可用库的源代码。

编辑:我不打算说编写自己的 serliazation 方法不好,但您必须考虑,如果使用格式良好的 JSON 对您的应用程序很重要,那么您必须权衡“多一个依赖项”的开销与您的自定义方法有一天可能会遇到您没有预料到的失败情况的可能性。这种风险是否可接受是你的决定。

评论

82赞 Ryan Duffield 10/11/2008
编写自己的 JSON 序列化方法很糟糕。在那里,我说了。:-)
28赞 jamesmortensen 1/2/2011
做别人已经做过的任何事情都是不好的。我们大多数人的报酬是为了完成工作,而不是重新发明轮子。
1158赞 user18015 5/27/2009 #3

JSON-js - JavaScript 中的 JSON.

要将对象转换为字符串,请使用:JSON.stringify

var json_text = JSON.stringify(your_object, null, 2);

要将 JSON 字符串转换为对象,请使用:JSON.parse

var your_object = JSON.parse(json_text);

John Resig 最近推荐了它:

...请开始迁移 使用 JSON 的应用程序转移到 Crockford 的 json2.js。它完全是 与 ECMAScript 5 兼容 规范并优雅降级 如果是原生(更快!)实现 存在。

事实上,我昨天刚刚在jQuery中进行了更改,该更改利用了 JSON.parse 方法(如果存在),现在 它已经完全指定了。

我倾向于相信他所说的关于JavaScript的言论:)

所有现代浏览器(以及许多不古老的旧浏览器)都原生支持 JSON 对象。当前版本的 Crockford 的 JSON 库将仅定义 并且尚未定义,则保留任何浏览器本机实现。JSON.stringifyJSON.parse

评论

15赞 2/18/2011
好点@Mark0978。为了解释,这里解释了 JSON.stringify 的参数。我还没有看到第二个参数的良好用例,但最后一个参数非常有用:它指示在格式化 JSON 字符串时要缩进多少空格。
1赞 xmedeko 10/4/2011
在使用此解决方案之前检查问题: [github.com/douglascrockford/JSON-js/pull/13] 也许更安全的是调整此代码,创建一些 JSON2 对象并使用它,而不考虑浏览器中的 JSON 支持。
1赞 Courtney Christensen 2/16/2012
@pat,第二个“replacer”参数对于已知对象的自定义序列化非常有用。例如,我使用以下方法序列化 SVG 元素:JSON.stringify(obj, function(key, val) { if (val instanceof SVGSVGElement) {return val.xml || new XMLSerializer().serializeToString(val);} return val;})
0赞 Chris 9/12/2012
Crockford 的代码不能很好地与一些更复杂的 jQuery 选择器配合使用。当我注释掉文件底部的 Object.prototype 修改时,它按预期工作。
0赞 Shital Shah 12/7/2013
我实际上更喜欢 JSON3。它有 AMD/requireJS 支持,而且它不使用 eval,Crockform 自己称之为“邪恶”。github.com/bestiejs/json3
11赞 Kain Haart 12/2/2009 #4

如果你不想使用外部库,可以使用原生的 JavaScript 方法,但它并不是完全跨浏览器的。.toSource()

30赞 jamesmortensen 1/2/2011 #5

我确实在某个地方找到了这个。不记得在哪里了......可能在 StackOverflow :)

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

评论

6赞 Marcello Nuccio 3/12/2011
你在这里找到了它:stackoverflow.com/questions/1184624/......
0赞 Jay Taylor 6/2/2011
这实际上不会将对象序列化为 JSON 字符串。
4赞 jamesmortensen 6/2/2011
@pyrony - 转到网站上的 Web 表单,在 FB 控制台中加载 Jquery 代码,然后运行以下命令: .data 现在是一个 JSON 字符串。然后,运行以下命令: 它应该提醒“字符串”。然后运行这个: ,你应该看到JSON文本。最后,转到 jsonlint.com 并粘贴 JSON 字符串。它应验证为 .我不确定我是否理解您的意思,因为一切似乎都指向这会产生有效的 JSON。再次感谢。var data = "" + $.toJSON($('form').serializeObject());alert(typeof data);alert(data);Valid JSON
0赞 rubo77 10/1/2013
我进入我的服务器,所以我包括$.toJSON is not a function <script src="http://www.x-non.com/json/jquery.json-2.4.min.js"> </script>
1赞 jamesmortensen 10/1/2013
@rubo77 - 我不记得我为什么使用 jquery-json。这是在 2-3/4 年前发布的,我认为当时尝试支持 IE7 和 IE6 仍然很酷,它们没有内置的 JSON 解析器。假设您只支持现代浏览器,您实际上可以在没有外部依赖的情况下替换并获得相同的结果。希望这有帮助!:)$.toJSONJSON.stringify
184赞 Jay Taylor 6/2/2011 #6

我已经使用 jquery-json 6 个月了,效果很好。使用起来非常简单:

var myObj = {foo: "bar", "baz": "wockaflockafliz"};
$.toJSON(myObj);

// Result: {"foo":"bar","baz":"wockaflockafliz"}

评论

13赞 Evan Plaice 4/20/2012
+1 如果你已经在使用jQuery,这是要走的路。JSON-js 非常适合作为独立库,但此插件将 JSON.stringify 和 JSON.parse 与 jQuery 无缝集成。这是双赢的。恕我直言,这应该是公认的答案。
7赞 ripper234 12/6/2012
@EvanPlaice - “无缝集成”是什么意思?使用 jquery-json 而不是 JSON-js 有什么好处?
6赞 Evan Plaice 12/8/2012
@ripper234我的意思是,如果它们可用,它使用本机 JSON.stringify/JSON.parse 方法,如果没有,它将回退到它自己的实现。基本上,它是用于 JSON 序列化的 polyfill。这样做的好处是,无论用户的浏览器是否原生支持客户端 JSON 序列化,您都可以获得客户端 JSON 序列化。
1赞 matewka 1/19/2013
我一直在寻找 IE6 JSON.stringify 替代品,这是迄今为止唯一有效的替代品。我的意思是,手动包含json.js效果很好,但与jQuery“$”命名空间发生冲突。
1赞 Matthew Flaschen 6/28/2014
@EvanPlaice,jquery-json 不是 polyfill。它是一个使用本机功能(如果可用)的库。相反,JSON-js(特别是json2.js)是一个polyfill,因为它提供了相同的JSON对象和API浏览器提供的,但不会破坏本机功能(这意味着现代浏览器仍然可以获得高性能的本机实现)。
101赞 pestatije 8/29/2011 #7

适用于 IE8+

无需jQuery,使用:

JSON.stringify(countries); 
7赞 Tim Burkhart 6/18/2014 #8

上述解决方案没有考虑的一件事是,如果您有一个输入数组,但只提供了一个值。

例如,如果后端需要一组人员,但在这种特殊情况下,您只是在处理一个人。然后做:

<input type="hidden" name="People" value="Joe" />

然后使用以前的解决方案,它只会映射到类似以下内容:

{
    "People" : "Joe"
}

但它真的应该映射到

{
    "People" : [ "Joe" ]
}

要解决此问题,输入应如下所示:

<input type="hidden" name="People[]" value="Joe" />

您将使用以下函数(基于其他解决方案,但进行了一些扩展)

$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
    if (this.name.substr(-2) == "[]"){
        this.name = this.name.substr(0, this.name.length - 2);
        o[this.name] = [];
    }

    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;
};
10赞 jherax 4/11/2015 #9

最好的方法是包含 JSON 对象的 polyfill。

但是,如果您坚持在 jQuery 命名空间内创建一个将对象序列化为 JSON 表示法(JSON 的有效值)的方法,则可以执行如下操作:

实现

// This is a reference to JSON.stringify and provides a polyfill for old browsers.
// stringify serializes an object, array or primitive value and return it as JSON.
jQuery.stringify = (function ($) {
  var _PRIMITIVE, _OPEN, _CLOSE;
  if (window.JSON && typeof JSON.stringify === "function")
    return JSON.stringify;

  _PRIMITIVE = /string|number|boolean|null/;

  _OPEN = {
    object: "{",
    array: "["
  };

  _CLOSE = {
    object: "}",
    array: "]"
  };

  //actions to execute in each iteration
  function action(key, value) {
    var type = $.type(value),
      prop = "";

    //key is not an array index
    if (typeof key !== "number") {
      prop = '"' + key + '":';
    }
    if (type === "string") {
      prop += '"' + value + '"';
    } else if (_PRIMITIVE.test(type)) {
      prop += value;
    } else if (type === "array" || type === "object") {
      prop += toJson(value, type);
    } else return;
    this.push(prop);
  }

  //iterates over an object or array
  function each(obj, callback, thisArg) {
    for (var key in obj) {
      if (obj instanceof Array) key = +key;
      callback.call(thisArg, key, obj[key]);
    }
  }

  //generates the json
  function toJson(obj, type) {
    var items = [];
    each(obj, action, items);
    return _OPEN[type] + items.join(",") + _CLOSE[type];
  }

  //exported function that generates the json
  return function stringify(obj) {
    if (!arguments.length) return "";
    var type = $.type(obj);
    if (_PRIMITIVE.test(type))
      return (obj === null ? type : obj.toString());
    //obj is array or object
    return toJson(obj, type);
  }
}(jQuery));

用法

var myObject = {
    "0": null,
    "total-items": 10,
    "undefined-prop": void(0),
    sorted: true,
    images: ["bg-menu.png", "bg-body.jpg", [1, 2]],
    position: { //nested object literal
        "x": 40,
        "y": 300,
        offset: [{ top: 23 }]
    },
    onChange: function() { return !0 },
    pattern: /^bg-.+\.(?:png|jpe?g)$/i
};

var json = jQuery.stringify(myObject);
console.log(json);
10赞 Shrish Shrivastava 6/29/2015 #10

这基本上是两步过程:

首先,你需要像这样字符串化:

var JSON_VAR = JSON.stringify(OBJECT_NAME, null, 2); 

之后,您需要将 转换为:stringObject

var obj = JSON.parse(JSON_VAR);
11赞 bruce 3/24/2016 #11

是的,您应该在致电之前:JSON.stringifyJSON.parseJson_PostData$.ajax

$.ajax({
        url:    post_http_site,  
        type: "POST",         
        data:   JSON.parse(JSON.stringify(Json_PostData)),       
        cache: false,
        error: function (xhr, ajaxOptions, thrownError) {
            alert(" write json item, Ajax error! " + xhr.status + " error =" + thrownError + " xhr.responseText = " + xhr.responseText );    
        },
        success: function (data) {
            alert("write json item, Ajax  OK");

        } 
});