jQuery returning “parsererror” for ajax request

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();
viewHtmls.Add(“data-bind”, “value: ViewID”);
viewHtmls.Add(“onchange”, “javascript:PageModel.LoadViewContentNames()”);
}
@Html.DropDownList(“view”, (List)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”.

Related:  iOS 8 removed “minimal-ui” viewport property, are there other “soft fullscreen” solutions?

Solutions/Answers:

Solution 1:

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

Solution 2:

See the answer by @david-east for the correct way to handle the issue

This answer is only relevant to a bug with jQuery 1.5 when using the file: protocol.

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;
        //...
    }
}
Related:  What is the JavaScript convention for no operation?

Solution 3:

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

Solution 4:

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 🙂

Related:  addEventListener using for loop and passing values [duplicate]

Solution 5:

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

Solution 6:

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