JQuery AJAX, Error Status code: 200, Status Text: parserorro | OK

Question

Here is a funny situation that I'm in. I'm developing an ASP.Net web site using VS 2008 and .Net Framework 3.5, and I want to use jquery ajax in a test page, the code looks like this:

C# Method
[WebMethod]
public static string test()
{
    return "Server Response" ;
}

$(document).ready(function() {
    $("#myDiv").click(function() {
        $.ajax({
            type: "POST",
            url: "AjaxTest.aspx/test",
            data: "",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
                        success: function(msg) {
                            // Replace the div's content with the page 
                            // method's return.
                            alert(msg.d);
                        },
                        error: function(result){ 
                            alert("error occured. Status:" + result.status  
                            + ' --Status Text:' + result.statusText 
                            + " --Error Result:" + result); 
                        }
           });
    });
});

So When I use Jquery 1.4.4 like this :

I get : Status 200; Status Text: OK Status 200; Status Text: OK

When I use Jquery 1.5 I get: Status 200; Status Text: Parsererror Status 200; Status Text: Parsererror

So I created a new WebSite in Visual Studio, copy and pased the code there, and it works fine !!!! I can't figure out what causes the problem. Also I have used methods with parameter, and setting data: "{}" , and removing data completely, but nothing seems to work.

I don't know if has to do anything with the DevExpress components that I'm using or not.

I also found a good answer which was working with complete method like this :

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

But I don't know if it will work fine or there might be some other problem with this method too. I also don't know how to access response data from here. But my main concern is finding out what is causing the problem in my website.

UPDATE: Well today in Google Chrome console I noticed some syntax problems with JQuery 1.5 they are as below:

Uncaught SyntaxError: Unexpected token < jQuery.jQuery.extend.globalEvaljquery.js:593 jQuery.ajaxSetup.converters.text scriptjquery.js:7175 ajaxConvertjquery.js:7074 donejquery.js:6622 jQuery.ajaxTransport.send.callbackjquery.js:7441

Answer 1

The issue isn't so easily solved with fiddler, although it's a great tool.

The issue I think is described here, and for now use the complete event. there are some issues that will be resolved in jQuery 1.5.1 See:

jQuery returning "parsererror" for ajax request

as it was posted there,

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

Although the interesting thing is - this works for me with jsonp data when I query amazon's service (code amazon was based on some other posting on the net I don't have the ref too) ala:

//resp is simple a placeholder for autocomplete's response which I will need to call on a global scope.
        var resp;
        var filter;

        $(document).ready(function () {
            //http://completion.amazon.com/search/complete?method=completion&q=halo&search-alias=videogames&mkt=1&x=updateISSCompletion&noCacheIE=1295031912518
            filter = $("#productFilter").autocomplete({
                source: function (request, response) {
                    resp = response;

                    $.ajax({
                        url: "http://completion.amazon.com/search/complete",
                        type: "GET",
                        cache: false,
                        dataType: "jsonp",
                        success: function (data) {
                            //data[1] contains an array of the elements returned from the service.
                            //use .map to enumerate through them.
                            response($.map(data[1], function (item) {
                                //debugger;
                                 return { label: item, value: item, id: item}
                            }))

                        },
                        data: {
                            q: request.term,
                            "search-alias": "videogames",
                            mkt: "1",
                            callback: '?'
                        }
                    });
                },
                minLength: 2,
                select: function (event, ui) {
                    //$('#browseNode option:first').attr('selected', 'selected');
                    alert('selected');
                },
                open: function () {
                    $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                },
                close: function () {
                    $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                }
            });
        });
        //this is the method that will be called by the jsonp request
        function updateISSCompletion() {
            alert('updateiss');
            resp(completion[1]);
        }

Answer 2

You should use Fiddler - the great web debugging proxy. With its help you can watch for all communication between server and client

Answer 3

Not sure if this will help, but the ajax() API specifies that they have changed the return object for the success() callback function. This is from the jQuery API

As of jQuery 1.5, the success callback function receives a "jqXHR" object (in jQuery 1.4, it received the XMLHttpRequest object). However, since JSONP and cross-domain GET requests do not use XHR, in those cases the jqXHR and textStatus parameters passed to the success callback are undefined.

You can find it here if it helps at all...

jQuery $ajax API

I am running into a similar problem, and am unable to pull the JSON object from any callback functions.

Answer 4

我想你可以在这个链接中找到这个问题的答案

Answer 5

I had this problem too but in PHP When i put in 'remote.php' :

`echo $msg`' 

problem occurs. When I use json_encode() :

echo json_encode($msg);

then everything works.

This is strange, because I get response from server with status 'OK', so then function 'success' should work not 'error'. In 'success' i have only

success: function(res){ console.log(res);}

Answer 6

在我的情况下（当使用“jquery 1.9.1”时），添加dataType：“json”解决了“parsererror”问题（我之前没有指定dataType并且发生了该问题）。

Answer 7

I had a similar problem.

I called in AJAX a REST service with POST method and got back :

arguments[0] = status 200 (OK) | arguments[1] = "parseerror" | arguments[2] = "Invalid JSON :"

My server method returned a "void" value. To resolve the problem, I replaced it by a Boolean value for example.