Analysieren Sie JSON aus den Erfolgsdaten von JQuery.ajax

76

Ich habe Probleme beim Abrufen des Inhalts des JSON-Objekts von einem JQery.ajax-Aufruf. Mein Anruf:

$('#Search').click(function () {
    var query = $('#query').valueOf();
    $.ajax({
        url: '/Products/Search',
        type: "POST",
        data: query,
        dataType: 'application/json; charset=utf-8',
        success: function (data) {
            alert(data);
            for (var x = 0; x < data.length; x++) {
                content = data[x].Id;
                content += "<br>";
                content += data[x].Name;
                content += "<br>";
                $(content).appendTo("#ProductList");
               // updateListing(data[x]);
            }
        }
    });
});

Es scheint, dass das JSON-Objekt korrekt zurückgegeben wird, da "alert (data)" Folgendes anzeigt

[{"Id": "1", "Name": "Shirt"}, {"Id": "2", "Name":"Pants"}]

aber wenn ich versuche, die ID oder den Namen auf der Seite anzuzeigen, indem ich:

content = data[x].Id;
content += "<br>";
content += data[x].Name;
content += "<br>";

es gibt "undefiniert" auf die Seite zurück. Was mache ich falsch?

Danke für die Hilfe.

actkatiemacias
quelle
7
Dokumentation hilft. api.jquery.com/jQuery.ajax zeigt, dass dies 'application/json; charset=utf-8'kein gültiger Wert für ist dataType.
Felix Kling
Konvertieren Sie zu JSON von JSON.parse ()
Hos Mercury

Antworten:

108

Die Daten werden als Zeichenfolgendarstellung des JSON zurückgegeben, und Sie konvertieren sie nicht zurück in ein JavaScript-Objekt. Stellen Sie das dataTypeauf ein 'json', damit es automatisch konvertiert wird.

Marcelo Cantos
quelle
4
@ DipakYadav: getJSONwird nicht POST.
Marcelo Cantos
8
@MarceloCantos (über Ihre Antwort): Dies ist wahr. Laut jQuery-Handbuch wird jedoch " jeder fehlerhafte JSON zurückgewiesen und ein Analysefehler ausgelöst. Ab jQuery 1.9 wird auch eine leere Antwort zurückgewiesen ". Sie können dataType: 'json'diesen Server also nur verwenden, wenn Sie sicher sind, dass er poperartig formatiertes JSON zurückgibt. Wenn nur " eine Zeichenfolge, die wie JSON aussieht " zurückgegeben wird, sollten Sie die dataType: "text json"jQuery-Konvertierung erzwingen.
Trejder
Header ('Inhaltstyp: application / json'); wenn Sie PHP verwenden
Rob Sedgwick
69

Ich empfehle Ihnen zu verwenden:

var returnedData = JSON.parse(response);

Konvertieren der JSON-Zeichenfolge (wenn es sich nur um Text handelt) in ein JavaScript-Objekt.

abobreshov
quelle
2
@ RyanGates Ich glaube, dass Abobreshov von einfach spricht success: function (data) {data = JSON.parse(data);}, wenn ich mich nicht irre.
Trejder
9

Sie können unter anderem sicherstellen, dass diese Art von Fehler (Verwendung von Zeichenfolge anstelle von JSON) nicht auftritt, indem Sie sehen, was in der Datei gedruckt wird alert. Wenn Sie das tun

alert(data)

Wenn Daten eine Zeichenfolge sind, wird alles gedruckt, was enthalten ist. Wenn Sie jedoch drucken, handelt es sich um ein JSON-Objekt. Sie erhalten die folgende Antwort in der Warnung

[object Object]

Wenn dies die Antwort ist, können Sie sicher sein, dass Sie dies als Objekt verwenden können (in diesem Fall json).

Daher müssen Sie Ihren String zuerst in json konvertieren, bevor Sie ihn folgendermaßen verwenden:

JSON.parse(data)
aash
quelle
9

Es funktioniert gut, Bsp.:

$.ajax({
    url: "http://localhost:11141/Search/BasicSearchContent?ContentTitle=" + "تهران",
    type: 'GET',
    cache: false,
    success: function(result) {
        //  alert(jQuery.dataType);
        if (result) {
            //  var dd = JSON.parse(result);
            alert(result[0].Id)
        }

    },
    error: function() {
        alert("No");
    }
});

Schließlich müssen Sie diese Anweisung verwenden ...

result[0].Whatever
Amin Saadati
quelle
7

Nun ... Sie sind ungefähr 3/4 des Weges dorthin ... Sie haben bereits Ihren JSON als Text.

Das Problem ist, dass Sie diese Zeichenfolge anscheinend so behandeln, als wäre es bereits ein JavaScript-Objekt mit Eigenschaften, die sich auf die übertragenen Felder beziehen.

Es ist nicht ... es ist nur eine Schnur.

Abfragen wie "content = data [x] .Id;" sind zum Scheitern verurteilt, da JavaScript diese Eigenschaften nicht findet, die an die Zeichenfolge angehängt sind, die es betrachtet ... wieder ist es NUR eine Zeichenfolge.

Sie sollten in der Lage sein, die Daten einfach als JSON über ... yup ... die Analysemethode des JSON-Objekts zu analysieren.

myResult = JSON.parse(request.responseText);

Jetzt ist myResult ein Javascript-Objekt, das die Eigenschaften enthält, die über AJAX übertragen wurden.

Das sollte es Ihnen ermöglichen, so damit umzugehen, wie Sie es zu versuchen scheinen.

Es sieht so aus, als ob JSON.parse hinzugefügt wurde, als ECMA5 hinzugefügt wurde. Daher sollte alles, was ziemlich modern ist, in der Lage sein, dies nativ zu handhaben. Wenn Sie mit Fossilien umgehen müssen, können Sie auch externe Bibliotheken wie jQuery oder JSON2 ausprobieren .

Für die Aufzeichnung wurde dies bereits von Andy E für jemand anderen HIER beantwortet .

edit - Ich habe die Anfrage nach 'offiziellen oder glaubwürdigen Quellen' gesehen, und wahrscheinlich ist einer der Codierer, die ich am glaubwürdigsten finde, John Resig ~ ECMA5 JSON ~ Ich hätte mit der tatsächlichen ECMA5-Spezifikation bezüglich nativer JSON-Unterstützung verlinkt, aber ich würde Verweisen Sie lieber jemanden an einen Meister wie Resig als an eine trockene Spezifikation.

Steve
quelle
6

Probieren Sie die jquery- eachFunktion aus, um durch Ihr json-Objekt zu gehen:

$.each(data,function(i,j){
    content ='<span>'+j[i].Id+'<br />'+j[i].Name+'<br /></span>';
    $('#ProductList').append(content);
});
Arabeske
quelle
4

Sie können die jQuery parseJSON-Methode verwenden:

var Data = $.parseJSON(response);
Suchit Kumar
quelle
1

Eingabetyp Schaltfläche

<input type="button" Id="update" value="Update">

Ich habe erfolgreich ein Formular mit AJAX in Perl gepostet. Nach dem Absenden des Formulars gibt der Controller eine JSON-Antwort wie folgt zurück

$(function() {

    $('#Search').click(function() {
        var query = $('#query').val();
        var update = $('#update').val();

        $.ajax({
            type: 'POST',
            url: '/Products/Search/',
            data: {
                'insert': update,
                'query': address,
            },
            success: function(res) {
                $('#ProductList').empty('');
                console.log(res);
                json = JSON.parse(res);
                for (var i in json) {
                    var row = $('<tr>');
                    row.append($('<td id=' + json[i].Id + '>').html(json[i].Id));
                    row.append($('<td id=' + json[i].Name + '>').html(json[i].Name));
                    $('</tr>');
                    $('#ProductList').append(row);
                }
            },
            error: function() {
                alert("did not work");
                location.reload(true);
            }
        });
    });
});
krunal shimpi
quelle
0

Aus der jQuery-API: Mit der Einstellung " dataTypeWenn keine angegeben ist" versucht jQuery, auf $.parseJSON()der Grundlage des MIME-Typs (der MIME-Typ für JSON-Text ist "application / json") der Antwort (in 1.4 JSON wird darauf schließen) darauf zu schließen ein JavaScript-Objekt).

Oder Sie können einstellen , die dataTypeauf jsonsie automatisch zu konvertieren.

Himmel Yip
quelle
0

Ich bin mir nicht sicher, was mit Ihrem Setup schief geht. Möglicherweise setzt der Server die Header nicht richtig. Nicht sicher. Auf lange Sicht können Sie dies versuchen

$.ajax({
    url : url,
    dataType : 'json'
})
.done(function(data, statusText, resObject) {
   var jsonData = resObject.responseJSON
})
Pravin
quelle
0

Analysieren und konvertieren Sie es in js Objekt, das es ist.

success: function(response) {
    var content = "";
    var jsondata = JSON.parse(response);
    for (var x = 0; x < jsonData.length; x++) {
        content += jsondata[x].Id;
        content += "<br>";
        content += jsondata[x].Name;
        content += "<br>";
    }
    $("#ProductList").append(content);
}
Max Base
quelle