jQuery renvoyant «parsererror» pour la requête ajax

186

J'ai obtenu un "parsererror" de jquery pour une requête Ajax, j'ai essayé de changer le POST en GET, renvoyant les données de différentes manières (création de classes, etc.) mais je n'arrive pas à comprendre quel est le problème.

Mon projet est dans MVC3 et j'utilise jQuery 1.5 J'ai une liste déroulante et sur l'événement onchange, je déclenche un appel pour obtenir des données en fonction de ce qui a été sélectionné.

Liste déroulante: (cela charge les "Vues" de la liste dans le Viewbag et déclencher l'événement fonctionne très bien)

@{
    var viewHtmls = new Dictionary<string, object>();
    viewHtmls.Add("data-bind", "value: ViewID");
    viewHtmls.Add("onchange", "javascript:PageModel.LoadViewContentNames()");
}
@Html.DropDownList("view", (List<SelectListItem>)ViewBag.Views, viewHtmls)

Javascript:

this.LoadViewContentNames = function () {
    $.ajax({
        url: '/Admin/Ajax/GetViewContentNames',
        type: 'POST',
        dataType: 'json',
        data: { viewID: $("#view").val() },
        success: function (data) {
            alert(data);
        },
        error: function (data) {
            debugger;
            alert("Error");
        }
    });
};

Le code ci-dessus appelle avec succès la méthode MVC et retourne:

[{"ViewContentID":1,"Name":"TopContent","Note":"Content on the top"},
 {"ViewContentID":2,"Name":"BottomContent","Note":"Content on the bottom"}]

Mais jquery déclenche l'événement d'erreur pour la méthode $ .ajax () en disant "parsererror".

Dkarzon
la source
déclenche-t-il une erreur javascript dans la console ou est-ce que la fonction de gestionnaire "erreur" de la commande $ .ajax () est exécutée?
arnorhs
désolé, aurait dû être plus précis, il déclenche la fonction d'erreur $ .ajax () {alert ("Error"); }
dkarzon
Une chance d'un lien en direct? Voyez-vous les données JSON que vous affichez dans Firebug?
Pekka
Non, je n'ai pas de lien en direct. Mais oui, c'est la réponse JSON affichée dans Firebug.
dkarzon
oui, mon mal était une faute de frappe. Correction de la question
dkarzon le

Réponses:

307

J'ai récemment rencontré ce problème et suis tombé sur cette question.

Je l'ai résolu d'une manière beaucoup plus simple.

Méthode un

Vous pouvez soit supprimer la dataType: 'json'propriété du littéral objet ...

Deuxième méthode

Ou vous pouvez faire ce que @Sagiv disait en renvoyant vos données sous la forme Json.


La raison pour laquelle ce parsererrormessage apparaît est que lorsque vous renvoyez simplement une chaîne ou une autre valeur, ce n'est pas vraiment le cas Json, de sorte que l'analyseur échoue lors de son analyse.

Donc, si vous supprimez la dataType: jsonpropriété, il n'essaiera pas de l'analyser comme Json.

Avec l'autre méthode, si vous vous assurez de renvoyer vos données comme Json, l'analyseur saura comment les gérer correctement.

David East
la source
4
Merci David, la première méthode a fonctionné pour moi. Dans mon cas, je n'ai rien retourné, mais j'ai utilisé un type de données par erreur. Merci pour le conseil.
Krishna Teja Veeramachaneni
Merci pour la réponse, j'ai mis à jour la réponse pour la quête car cela semble être une meilleure solution.
dkarzon
J'ai rencontré ce problème lorsque mon script php avait une erreur et renvoyait des données non JSON - une suggestion utile à désactiver dataType !
Sharadh
Je vous remercie! Cela s'applique également à jquery.fileupload.js et à d'autres bibliothèques utilisant les méthodes JQuery AJAX. Message d'erreur déroutant!
kqr
Je reçois ce problème en utilisant Rails jquery-ujs
Donato
29

Voir la réponse de @ david-east pour savoir comment gérer correctement le problème

Cette réponse n'est pertinente que pour un bogue avec jQuery 1.5 lors de l'utilisation du file: protocol.

J'ai eu un problème similaire récemment lors de la mise à niveau vers jQuery 1.5. Malgré une réponse correcte, le gestionnaire d'erreurs s'est déclenché. Je l'ai résolu en utilisant l' completeévénement, puis en vérifiant la valeur de l'état. par exemple:

complete: function (xhr, status) {
    if (status === 'error' || !xhr.responseText) {
        handleError();
    }
    else {
        var data = xhr.responseText;
        //...
    }
}
johnhunter
la source
1
Confirmé corrigé dans JQuery 1.5.1
johnhunter
13
J'ai ce problème dans 1.7.2 :(
Eystein Bye
6
J'avais juste ce problème, mais j'ai supprimé le type de données: 'json' et le problème a été résolu. Puisqu'il ne renvoie pas une vraie forme un json, il rencontrera une erreur d'analyseur.
David East
3
J'ai ce problème dans la version 1.9.1 et je l'ai contourné en demandant à mon API de renvoyer un hachage vide {}. Dommage que ce soit nécessaire.
Adam Tuttle
4
Ceci est en fait dans la documentation: ...The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected; the server should return a response of null or {} instead. api.jquery.com/jQuery.ajax
Rob
17

Vous avez spécifié le dataType de réponse à l'appel ajax comme suit :

«json»

où comme la réponse ajax réelle n'est pas un JSON valide et par conséquent, l'analyseur JSON lève une erreur.

La meilleure approche que je recommanderais est de changer le dataType en:

'texte'

et dans le rappel de réussite, vérifiez si un JSON valide est retourné ou non, et si la validation JSON échoue, alertez-le à l'écran afin qu'il soit évident dans quel but l'appel ajax échoue réellement. Jetez un œil à ceci:

$.ajax({
    url: '/Admin/Ajax/GetViewContentNames',
    type: 'POST',
    dataType: 'text',
    data: {viewID: $("#view").val()},
    success: function (data) {
        try {
            var output = JSON.parse(data);
            alert(output);
        } catch (e) {
            alert("Output is not valid JSON: " + data);
        }
    }, error: function (request, error) {
        alert("AJAX Call Error: " + error);
    }
});
Nadeem Khan
la source
1
ou supprimer le type de données :)
Alexander
10

le problème est que votre contrôleur renvoie une chaîne ou un autre objet qui ne peut pas être analysé. l'appel ajax devrait obtenir Json en retour. essayez de retourner JsonResult dans le contrôleur comme ça:

 public JsonResult YourAction()
    {
        ...return Json(YourReturnObject);

    }

J'espère que ça aide :)

Sagiv Ofek
la source
Désolé, j'ai oublié d'inclure mon code derrière, mais c'est exactement comme ça que le Json est retourné.
dkarzon le
4

Il y a beaucoup de suggestions à supprimer

dataType: "json"

Bien que j'accorde que cela fonctionne, il ignore le problème sous-jacent. Si vous êtes sûr que la chaîne de retour est vraiment JSON, recherchez un espace blanc errant au début de la réponse. Pensez à y jeter un œil dans Fiddler. Le mien ressemblait à ceci:

Connection: Keep-Alive
Content-Type: application/json; charset=utf-8

{"type":"scan","data":{"image":".\/output\/ou...

Dans mon cas, c'était un problème avec PHP crachant des caractères indésirables (dans ce cas, les nomenclatures de fichiers UTF). Une fois que je les ai supprimés, cela a résolu le problème tout en conservant

dataType: json
Sam Strachan
la source
D'accord avec cela ... J'ai vérifié la réponse et c'était un var_dump () qui a été perdu quelque part dans l'application.
Chuck
2

Assurez-vous de supprimer tout code de débogage ou tout autre élément susceptible de générer des informations non souhaitées. Un peu évident, mais facile à oublier sur le moment.

Jahmic
la source
0

Je ne sais pas si cela est toujours réel mais le problème était avec l'encodage. Le passage à ANSI a résolu le problème pour moi.

George Dgebuadze
la source
0

Si vous rencontrez ce problème en utilisant HTTP GET dans IE, j'ai résolu ce problème en définissant le cache: false. Comme j'ai utilisé la même URL pour les requêtes HTML et json, elle a frappé le cache au lieu de faire un appel json.

$.ajax({
    url: '/Test/Something/',
    type: 'GET',
    dataType: 'json',
    cache: false,
    data: { viewID: $("#view").val() },
    success: function (data) {
        alert(data);
    },
    error: function (data) {
        debugger;
        alert("Error");
    }
});
Stuart
la source
0

vous devez supprimer le dataType: "json". Ensuite, voyez la magie ... la raison de faire une telle chose est que vous convertissez un objet json en une chaîne simple ... donc json parser n'est pas capable d'analyser cette chaîne car il n'est pas un objet json.

this.LoadViewContentNames = function () {
$.ajax({
    url: '/Admin/Ajax/GetViewContentNames',
    type: 'POST',
    data: { viewID: $("#view").val() },
    success: function (data) {
        alert(data);
    },
    error: function (data) {
        debugger;
        alert("Error");
    }
 });
};
Desi garçons
la source
0

en cas d'opération Get à partir du web .net mvc / api, assurez-vous que vous êtes autorisé à obtenir

     return Json(data,JsonRequestBehavior.AllowGet);
Mohamed.Abdo
la source
0

J'obtenais également "Demande de retour avec erreur: parsererror." dans la console javascript. Dans mon cas, ce n'était pas une question de Json, mais je devais passer à la zone de texte de vue un encodage valide.

  String encodedString = getEncodedString(text, encoding);
  view.setTextAreaContent(encodedString);
Laura Liparulo
la source
0

J'ai rencontré une telle erreur, mais après avoir modifié ma réponse avant de l'envoyer au client, cela a bien fonctionné.

//Server side
response = JSON.stringify('{"status": {"code": 200},"result": '+ JSON.stringify(result)+'}');
res.send(response);  // Sending to client

//Client side
success: function(res, status) {
    response = JSON.parse(res); // Getting as expected
    //Do something
}
Ananth Kumar Vasamsetti
la source
0

J'ai eu le même problème, il s'est avéré que ce web.confign'était pas la même chose avec mes coéquipiers. Veuillez donc vérifier votre web.config.

J'espère que cela aide quelqu'un.

Roshna Omer
la source
-1

Le problème

window.JSON.parse génère une erreur dans la fonction $ .parseJSON.

<pre>
$.parseJSON: function( data ) {
...
// Attempt to parse using the native JSON parser first
if ( window.JSON && window.JSON.parse ) {
return window.JSON.parse( data );
}
...
</pre>

Ma solution

Surcharge de JQuery à l'aide de l' outil requirejs .

<pre>
define(['jquery', 'jquery.overload'], function() { 
    //Loading jquery.overload
});
</pre>

Contenu du fichier jquery.overload.js

<pre>
define(['jquery'],function ($) { 

    $.parseJSON: function( data ) {
        // Attempt to parse using the native JSON parser first
        /**  THIS RAISES Parsing ERROR
        if ( window.JSON && window.JSON.parse ) {
            return window.JSON.parse( data );
        }
        **/

        if ( data === null ) {
            return data;
        }

        if ( typeof data === "string" ) {

            // Make sure leading/trailing whitespace is removed (IE can't handle it)
            data = $.trim( data );

            if ( data ) {
                // Make sure the incoming data is actual JSON
                // Logic borrowed from http://json.org/json2.js
                if ( rvalidchars.test( data.replace( rvalidescape, "@" )
                    .replace( rvalidtokens, "]" )
                    .replace( rvalidbraces, "")) ) {

                    return ( new Function( "return " + data ) )();
                }
            }
        }

        $.error( "Invalid JSON: " + data );
    }

    return $;

});
</pre>
Christian MEROUR
la source
-1

Si vous ne souhaitez pas supprimer / modifierdataType: json , vous pouvez remplacer l'analyse stricte de jQuery en définissant un personnalisé converter:

$.ajax({
    // We're expecting a JSON response...
    dataType: 'json',

    // ...but we need to override jQuery's strict JSON parsing
    converters: {
        'text json': function(result) {
            try {
                // First try to use native browser parsing
                if (typeof JSON === 'object' && typeof JSON.parse === 'function') {
                    return JSON.parse(result);
                } else {
                    // Fallback to jQuery's parser
                    return $.parseJSON(result);
                }
            } catch (e) {
               // Whatever you want as your alternative behavior, goes here.
               // In this example, we send a warning to the console and return 
               // an empty JS object.
               console.log("Warning: Could not parse expected JSON response.");
               return {};
            }
        }
    },

    ...

En utilisant cela, vous pouvez personnaliser le comportement lorsque la réponse ne peut pas être analysée en tant que JSON (même si vous obtenez un corps de réponse vide!)

Avec ce convertisseur personnalisé, .done()/ successsera déclenché tant que la demande a réussi autrement (code de réponse 1xx ou 2xx).

Alexw
la source