当http状态代码为“200 OK”时，为什么$ .ajax调用json数据会触发错误回调？

Question

I have the following ajax request:

        jQuery.ajax({
            async: true,
            type: "GET",
            url: url,
            data: data,
            dataType: "json",
            success: function(results){
                currentData = results;
            },
            error: function(xhr, ajaxOptions, thrownError){
                if (xhr.status == 200) {
                    console.debug("Error code 200");
                }
                else {
                    currentData = {};
                    displayAjaxError(xhr.status);
                }
            }
        });

For some reason the error callback is called event though the http status code is 200 ie. the request is OK. Why is this?

Answer 1

The problem might be that the json data returned from the url is malformed. When the server actually returns something, the http status code is 200. But that doesn't mean that the data is proper json. Check that the stringified json data returned is correctly formed.

I'm answering my own guestion because I learned this the hard way. I hadn't escaped a "-quote character in my json data. This resulted in very odd behaviour. Luckily the double quote character is pretty much the only character that needs to be escaped from data delivered via JSON. (More on this issue: Where can I find a list of escape characters required for my JSON ajax return type? )

Answer 2

Does your callback return a page with Content-type: application/json ? If not, that could well be the reason.

Answer 3

I do a lot of testing with file: urls instead of using a web server. My JSON code will always have the wrong MIME type. To take care of this I use the following code:

$(document).ready(
    function (){

        myData = {};
        $.ajax({
            type: "GET",
            // url: "json.php?fn=jsonData.json",        // with Apache
            url: "jsonData.json",                       // As a file:/// URL
            contentType: "application/json; charset=utf-8",
            data: myData,
            beforeSend: function(x) {
                if(x && x.overrideMimeType) {
                    x.overrideMimeType("application/json; charset=UTF-8");
                }
            },
            dataType: "json",

            success: function(returnData){
                 $("#jsonData").html("Success:"+returnData.tag);
            },
            error: function(returnData) {
                 $("#jsonData").html("Error:"+returnData.tag);
            }
        });
    }
);

This will force the MIME type to be correct for JSON data.