题 在jQuery中序列化为JSON [重复]


这个问题在这里已有答案:

我需要将对象序列化为JSON。我正在使用jQuery。是否有“标准”方法来做到这一点?

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

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

我需要把它变成一个传递给它的字符串 $.ajax() 喜欢这个:

$.ajax({
    type: "POST",
    url: "Concessions.aspx/GetConcessions",
    data: "{'countries':['ga','cd']}",
...

1143
2017-10-10 15:29


起源


没有人指出这一点 countries 是变量的名称,而不是键...当您尝试序列化时,信息将丢失。 - mpen
是的..需要是JSON.stringify({countries:countries}) - Bodman
angular.js有:angular.fromJson和angular.toJson ...所以如果你已经使用了角度,这很棒然后woot - CommaToast
stackoverflow.com/questions/38408348/... - Suraj Roy


答案:


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的应用程序   克罗克福德的json2.js。它是完全的   与ECMAScript 5兼容   规范和优雅降级   如果是本机(更快!)实现   存在。

事实上,我昨天刚刚在jQuery中进行了一次改动,利用了   JSON.parse方法,如果它存在,现在   它已被完全指定。

我倾向于相信他在JavaScript问题上所说的话:)

较新的浏览器 支持 JSON对象 本身。 Crockford的JSON库的当前版本将仅定义 JSON.stringify 和 JSON.parse 如果它们尚未定义,则保留任何浏览器本机实现。


1092
2018-05-26 19:22



好点@Mark0978。仅作为解释,解释了JSON.stringify的参数 这里。我还没有看到第二个参数的好用例,但最后一个参数非常有用:它表示格式化JSON字符串时要用多少空格来缩进。
使用此解决方案之前,请检查问题:[github.com/douglascrockford/JSON-js/pull/13] 也许更安全的是调整此代码创建一些JSON2对象并使用它,无论浏览器中的JSON支持如何。 - xmedeko
@pat,第二个,“replacer”arg对于已知对象的自定义序列化非常有用。例如,我使用以下方法序列化SVG元素: JSON.stringify(obj, function(key, val) { if (val instanceof SVGSVGElement) {return val.xml || new XMLSerializer().serializeToString(val);} return val;}) - Courtney Christensen
Crockford的代码与一些更复杂的jQuery选择器不相称。当我在文件底部注释掉Object.prototype修改时,它按预期工作。 - Chris
我其实更喜欢JSON3。它有AMD / requireJS支持加上它没有使用Crockform自己提到的“邪恶”的eval。 github.com/bestiejs/json3 - ShitalShah


我一直在用 jQuery的JSON 为期6个月,效果很好。它使用起来非常简单:

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

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

181
2018-06-01 21:40



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


适用于IE8 +

不需要jQuery,使用:

JSON.stringify(countries); 

92
2017-08-29 06:57



-1在缺少本机JSON序列化的旧浏览器中不起作用。 - Cory House
@Cory - 只要包含JSON-js,如果找到它就会转移到本机实现 - James Westgate
是的,詹姆斯同意了。我使用相同的。 -1是因为在这个答案中没有警告你必须使用库来获得对旧浏览器的支持。 - Cory House
谁在乎IE <8?我不。如果我按照自己的方式行事,我甚至不会为任何版本的程序编写一点Javascript。 - Thomas Eding
@Izkata:我知道。我只是喜欢抨击它以获得乐趣。对于个人项目,我不会打扰。但对于实际工作,我会做我老板要我做的事情。 - Thomas Eding


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

它增加了两个功能: $.toJSON(value)$.parseJSON(json_str, [safe])


43
2017-10-10 15:35



在jQuery中,大多数好东西都以插件的形式出现。通过避免插件,您将重写大量已编写的内容。 - Tahir Akhtar
注意 $.parseJSON 现在是jQuery的核心。 - Marnen Laibow-Koser


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

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

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


34
2017-10-10 15:47



编写自己的JSON序列化方法很糟糕。在那里,我说了。 :-) - Ryan Duffield
做别人已经做过的事情很糟糕。我们大多数人都是为了完成工作而付出的,而不是重新发明轮子。 - jmort253
我将不得不同意@Adam这一点。他并不是在鼓吹你自己,而是在暗示你 认为 关于你在接受它和“完成工作”之前所采取的依赖关系。每当你采取依赖关系时,你都依赖于一个并不真正关心你的项目的未提交的未参与的第三方。有些图书馆有很好的文档记录,并且周围有健康的社区,并且通常可以安全使用。但是,提前知道这一点对您和您的客户有利。 - Paul Alexander


我确实找到了这个地方。不记得在哪里...可能在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;
};

26
2018-01-02 07:57



你在这里找到它: stackoverflow.com/questions/1184624/... - Marcello Nuccio
这实际上并不将对象序列化为JSON字符串。 - Jay Taylor
@pyrony - 你能详细说明吗?谢谢。 - jmort253
@pyrony - 转到网站上的Web表单,在FB控制台中加载Jquery代码,然后运行: var data = "" + $.toJSON($('form').serializeObject());。数据现在是一个JSON字符串。之后,运行: alert(typeof data); 它应警告“字符串”。然后运行: alert(data);,你应该看到JSON文本。最后,去吧 jsonlint.com 并粘贴在JSON字符串中。它应该验证为 Valid JSON。我不确定我理解你的意思,因为一切似乎都指向这产生有效的JSON。再次感谢。 - jmort253
@rubo77 - 我不记得为什么我使用jquery-json。这是在2-3 / 4年前发布的,我认为当时尝试支持IE7和IE6仍然很酷,它没有内置的JSON解析器。你实际上可以替换 $.toJSON 同 JSON.stringify 假设您只支持现代浏览器,并且在没有外部依赖性的情况下获得相同的结果。希望这可以帮助! :) - jmort253


如果您不想使用外部库,那么 .toSource() 本机JavaScript方法,但它不是完全跨浏览器。


10
2017-12-01 21:44





最好的方法是将polyfill包括在内 JSON 目的。

但是如果你坚持创建一个将对象序列化为JSON表示法的方法(JSON的有效值在jQuery命名空间内,你可以这样做:

履行

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

9
2018-04-11 05:50





是的,在调用$ .ajax之前,你应该JSON.stringify和JSON.parse你的“Json_PostData”

$就({
            url:post_http_site,
            类型:“POST”,
            data:JSON.parse(JSON.stringify(Json_PostData)),
            cache:false,
            错误:function(xhr,ajaxOptions,thrownError){
                alert(“写json项,Ajax错误!”+ xhr.status +“error =”+ thrownError +“xhr.responseText =”+ xhr.responseText);
            },
            成功:函数(数据){
                alert(“写json项目,Ajax OK”);

            }
    });

7
2018-03-24 03:50