当前位置:  开发笔记 > 编程语言 > 正文

在jQuery中序列化为JSON

如何解决《在jQuery中序列化为JSON》经验,为你挑选了11个好方法。

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

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

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

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

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

小智.. 1131

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.stringify,JSON.parse如果它们尚未定义,则保留任何浏览器本机实现.



1> 小智..:

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.stringify,JSON.parse如果它们尚未定义,则保留任何浏览器本机实现.


好点@ Mark0978.仅作为解释,[这里]解释了JSON.stringify的参数(https://developer.mozilla.org/En/Using_JSON_in_Firefox#Converting_objects_into_JSON).我还没有看到第二个参数的好用例,但最后一个参数非常有用:它表示格式化JSON字符串时要用多少空格来缩进.

2> Jay Taylor..:

我一直在使用jquery-json 6个月,效果很好.它使用起来非常简单:

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

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


+1如果你已经在使用jQuery,这就是你要走的路.JSON-js作为一个独立的库非常棒,但是这个插件可以将JSON.stringify和JSON.parse与jQuery无缝集成.这是一个双赢的局面.恕我直言,这应该是公认的答案.
@EvanPlaice - 你的意思是'seammless integrates'.使用jquery-json而不是JSON-js可以获得什么?
@ ripper234我的意思是它使用原生的JSON.stringify/JSON.parse方法,如果它们可用,如果没有,它将回退到它自己的实现.基本上,它是用于JSON序列化的polyfill.无论用户的浏览器是否支持本机,您都可以获得客户端JSON序列化.

3> 小智..:

适用于IE8 +

不需要jQuery,使用:

JSON.stringify(countries); 


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

4> Tahir Akhtar..:

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

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


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

5> Adam Bellair..:

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

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

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


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

6> jmort253..:

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


你在这里找到它:http://stackoverflow.com/questions/1184624/serialize-form-to-json-with-jquery/1186309#1186309
@pyrony - 转到网站上的Web表单,在FB控制台中加载Jquery代码,然后运行:`var data =""+ $ .toJSON($('form').serializeObject()); `.数据现在是一个JSON字符串.然后,运行:`alert(typeof data);`它应该警告"string".然后运行:`alert(data);`,你应该看到JSON文本.最后,转到http://jsonlint.com并粘贴JSON字符串.它应该验证为"有效的JSON".我不确定我理解你的意思,因为一切似乎都指向这产生有效的JSON.再次感谢.

7> 小智..:

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



8> jherax..:

最好的方法是将polyfill包含在JSON对象中.

但是如果你坚持在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);



9> 小智..:

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

$.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");

        } 
});



10> 小智..:

这基本上是两步过程:

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

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

之后,您需要将字符串转换为Object

var obj = JSON.parse(JSON_VAR);



11> Tim Burkhart..:

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

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


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

{
    "People" : "Joe"
}

但它应该真正映射到

{
    "People" : [ "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;
};

推荐阅读
有风吹过best
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有