jQuery returning “parsererror” for ajax request

Been getting a “parsererror” from jquery for an Ajax request, I have tried changing the POST to a GET, returning the data in a few different ways (creating classes, etc.) but I cant seem to figure out what the problem is.

My project is in MVC3 and I’m using jQuery 1.5 I have a Dropdown and on the onchange event I fire off a call to get some data based on what was selected.

Dropdown: (this loads the “Views” from the list in the Viewbag and firing the event works fine)

@{
    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");
        }
    });
};

The above code successfully calls the MVC method and returns:

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

But jquery fires the error event for the $.ajax() method saying “parsererror”.

jquery 1.6.2 ajax request to aspx method always returns parsererror

Im ready to start pulling my hair out here. Trying to use jquery ajax request in Firefox to return simple string from method in my code behind. Regardless of what I try, I always get parsererror – une

Parsererror for jQuery corss domain ajax request to Spring Rest web service

i have deployed a REST web service and the service return String as a response. When i send cross domain jQuery ajax request i get ‘parsererror’. Below is Spring Controller: @RequestMapping(value=/Te

parsererror after jQuery.ajax request with jsonp content type

I am using jQuery Version 1.5.1 to do the following ajax call: $.ajax({ dataType: ‘jsonp’, data: { api_key : apiKey }, url: http://de.dawanda.com/api/v1/ + resource + .json, success: function(data

jQuery.ajax() parsererror

when i try to get JSON from http://api-v3.deezer.com/1.0/search/album/?q=beethoven&index=2&nb_items=2&output=json with: (jQuery 1.6.2) $.ajax({ type: GET, url: url, dataType: jsonp, su

jQuery, Ajax, JSON, PHP and parsererror

I’m trying to send a form to a PHP using $.ajax in jQuery. I send the whole thing as JSON, but, when I try to get the response, I get the ‘parsererror’. What am I doing wrong? jQuery fragment: $(form

jQuery AJAX – Unexpected token + parsererror

I wrote a script using jQuery and AJAX today, and I get some errors… The script: function changeAdmin(id) { $(document).ready(function() { $(‘#ta-modarea-‘+id).fadeOut(‘fast’); $(‘#ta-m-loading-‘+id

About parsererror SyntaxError: Unexpected end of input (CI with Jquery&ajax )

I don’t understand this error . I use codeigneter and Jquery&ajax Error parsererror personEdit.php $(document).ready(function(){ var options = { dataType : ‘json’, beforeSubmit: saveShowRequest, /

Jquery Jsonp: Request failed: parsererror in Internet Explorer 9 and below

I am using JSONP to make cross domain requests. The script works perfectly in Firefox and Chrome, but in IE 9 and below I get the following error: Request failed: parsererror Error: jQuery172002760165

jQuery / ASP MVC — parsererror in “$.ajax” calls

I’d like to create a simple action link in ASP.Net MVC RC2 using jQuery 1.3.1 – something like this: <a href=# onclick=AjaxTest1()>Tester</a> with the AjaxTest1 function: function A

jquery Parsererror in $.ajaxSetup()

i am currently working on a program in jquery. My program works fine in firefox 3.5 but not until i upgraded my browser to firefox 4.0. Since then, the ‘parsererror’ never failed to show and it gives

Answers

I had a similar problem recently when upgrading to jQuery 1.5. Despite getting a correct response the error handler fired. I resolved it by using the complete event and then checking the status value. e.g:

complete: function (xhr, status) {
    if (status === 'error' || !xhr.responseText) {
        handleError();
    }
    else {
        var data = xhr.responseText;
        //...
    }
}

See the context of this snippet at: http://code.google.com/p/jquery-include/source/browse/trunk/js/jquery.include-2.3.js

I know they rewrote the Ajax module for version 1.5. I haven’t checked for a ticket for this on jQuery yet.

the problem is that your controller returning string or other object that can’t be parsed. the ajax call expected to get Json in return. try to return JsonResult in the controller like that:

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

    }

hope it helps 🙂

I recently encountered this problem and stumbled upon this question.

I resolved it with a much easier way.

Method One

You can either remove the dataType: ‘json’ property from the object literal…

Method Two

Or you can do what @Sagiv was saying by returning your data as Json.

The reason why this parserror message occurs is that when you simply return a string or another value, it is not really Json, so the parser fails when parsing it.’

So if you remove the dataType: json property, it will not try to parse it as Json.

With the other method if you make sure to return your data as Json, the parser will know how to handle it properly.

The problem

window.JSON.parse raises an error in $.parseJSON function.

<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>

My solution

Overloading JQuery using requirejs tool.

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

jquery.overload.js file content

<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>

Your JSON data might be wrong. http://jsonformatter.curiousconcept.com/ to validate it.

Make sure that you remove any debug code or anything else that might be outputting unintended information. Somewhat obvious, but easy to forgot in the moment.

I don’t know if this is still actual but problem was with Encoding. Changing to ANSI resolved the problem for me.

If you get this problem using HTTP GET in IE I solved this issue by setting the cache: false. As I used the same url for both HTML and json requests it hit the cache instead of doing a json call.

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

There are lots of suggestions to remove

dataType: "json"

While I grant that this works it’s ignoring the underlying issue. If you’re confident the return string really is JSON then look for errant whitespace at the start of the response. Consider having a look at it in fiddler. Mine looked like this:

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

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

In my case this was a problem with PHP spewing out unwanted characters (in this case UTF file BOMs). Once I removed these it fixed the problem while also keeping

dataType: json

you should remove the dataType: “json”. Then see the magic… the reason of doing such thing is that you are converting json object to simple string.. so json parser is not able to parse that string due to not being a json object.

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");
    }
 });
};

incase of Get operation from web .net mvc/api, make sure you are allow get

     return Json(data,JsonRequestBehavior.AllowGet);

You have specified the ajax call response dataType as:

‘json’

where as the actual ajax response is not a valid JSON and as a result the JSON parser is throwing an error.

The best approach that I would recommend is to change the dataType to:

‘text’

and within the success callback validate whether a valid JSON is being returned or not, and if JSON validation fails, alert it on the screen so that its obvious for what purpose the ajax call is actually failing. Have a look at this:

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

If you don’t want to remove/change dataType: json, you can override jQuery’s strict parsing by defining a custom 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 {};
            }
        }
    },

    ...

Using this, you can customize the behavior when the response cannot be parsed as JSON (even if you get an empty response body!)

With this custom converter, .done()/success will be triggered as long as the request was otherwise successful (1xx or 2xx response code).