web-dev-qa-db-de.com

Serialisierung auf JSON in jQuery

Ich muss serialisieren ein Objekt zu JSON . Ich benutze jQuery . Gibt es eine "Standard" -Methode, um dies zu tun?

Meine spezielle Situation: Ich habe ein Array wie folgt definiert:

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

und ich muss dies in eine Zeichenfolge umwandeln, um $.ajax() wie folgt zu übergeben:

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

JSON-js - JSON in JavaScript.

Verwenden Sie JSON.stringify, um ein Objekt in eine Zeichenfolge zu konvertieren:

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

Verwenden Sie zum Konvertieren einer JSON-Zeichenfolge in ein Objekt JSON.parse:

var your_object = JSON.parse(json_text);

Es wurde kürzlich empfohlen von John Resig :

... BITTE beginnen Sie mit der Migration Ihrer JSON-Anwendungen auf Crockfords json2.js. Es ist vollständig kompatibel mit der ECMAScript 5-Spezifikation und beeinträchtigt die Funktionalität, wenn eine native (schnellere!) Implementierung vorhanden ist.

Tatsächlich habe ich gestern eine Änderung in jQuery gefunden, die die JSON.parse-Methode verwendet, wenn sie existiert, nachdem sie vollständig spezifiziert wurde.

Ich neige dazu, zu vertrauen, was er über JavaScript-Angelegenheiten sagt :)

Alle modernen Browser (und viele ältere, die nicht uralt sind) unterstützen das JSON-Objekt nativ. Die aktuelle Version von Crockfords JSON-Bibliothek definiert JSON.stringify und JSON.parse nur, wenn sie nicht bereits definiert sind, und lässt die native Implementierung des Browsers intakt.

1124
user18015

Ich benutze jquery-json seit 6 Monaten und es funktioniert großartig. Es ist sehr einfach zu bedienen:

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

// Result: {"foo":"bar","baz":"wockaflockafliz"}
184
Jay Taylor

Funktioniert mit IE8 +

Keine Notwendigkeit für jQuery, verwenden Sie:

JSON.stringify(countries); 
96
pestatije

Ich habe es nicht benutzt, aber Sie möchten vielleicht das jQuery-Plugin von Mark Gibson ausprobieren.

Es werden zwei Funktionen hinzugefügt: $.toJSON(value), $.parseJSON(json_str, [safe]).

45
Tahir Akhtar

Nein, die Standardmethode für die Serialisierung zu JSON ist die Verwendung einer vorhandenen JSON-Serialisierungsbibliothek. Wenn Sie dies nicht möchten, müssen Sie Ihre eigenen Serialisierungsmethoden schreiben.

Wenn Sie Anleitungen dazu benötigen, sollten Sie die Quelle einiger der verfügbaren Bibliotheken untersuchen.

EDIT: Ich werde nicht herauskommen und sagen, dass das Schreiben eigener Serliazierungsmethoden schlecht ist, aber Sie müssen bedenken, dass Sie, wenn es für Ihre Anwendung wichtig ist, gut geformtes JSON zu verwenden, dies tun müssen Wägen Sie den Aufwand für "eine weitere Abhängigkeit" gegen die Möglichkeit ab, dass Ihre benutzerdefinierten Methoden eines Tages auf einen Fehlerfall stoßen, den Sie nicht erwartet hatten. Ob dieses Risiko akzeptabel ist, ist Ihr Anruf.

35
Adam Bellaire

Ich habe das irgendwo gefunden. Kann mich aber nicht erinnern wo ... wahrscheinlich auf 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;
};
27
jmort253

Wenn Sie keine externen Bibliotheken verwenden möchten, gibt es die native JavaScript-Methode .toSource(), die jedoch nicht vollständig browserübergreifend ist.

11
Kain Haart

Am besten fügen Sie die Polyfüllung für das Objekt JSON ein.

Wenn Sie jedoch darauf bestehen, eine Methode zum Serialisieren eines Objekts in JSON-Notation ( gültige Werte für JSON ) im jQuery-Namespace zu erstellen, können Sie Folgendes tun:

Implementierung

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

Verwendungszweck

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
jherax

Ja, Sie sollten JSON.stringify und JSON.parse Ihren Json_PostData eingeben, bevor Sie $.ajax aufrufen:

$.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
bruce

Es ist im Grunde 2-Stufen-Prozess:

Zuerst müssen Sie so stringifizieren

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

Danach müssen Sie den String in Object konvertieren

var obj = JSON.parse(JSON_VAR);
8

Eine Sache, die die obigen Lösungen nicht berücksichtigen, ist, wenn Sie ein Array von Eingaben haben, aber nur ein Wert angegeben wurde.

Wenn das Back-End beispielsweise eine Reihe von Personen erwartet, haben Sie es in diesem speziellen Fall nur mit einer einzelnen Person zu tun. Dann mache ich:

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

Dann würde es mit den vorherigen Lösungen einfach so aussehen:

{
    "People" : "Joe"
}

Aber es sollte sich wirklich abbilden lassen

{
    "People" : [ "Joe" ]
}

Um dies zu beheben, sollte die Eingabe folgendermaßen aussehen:

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

Und Sie würden die folgende Funktion verwenden (basierend auf anderen Lösungen, aber etwas erweitert)

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