Data inserted successful but jquery still returning error

Question

I used following jQuery to insert data via Data Service. Event though I got status-response 201 and the data is successfully inserted into my database, the system still regard it as an error and gives me "failed" alert?

What am I missing here?

$.ajax({
    type: "POST",
    url: "http://localhost:49223/Form/WebDataService.svc/XMLForm(guid'1eaef3a0-d6df-45bf-a8f6-3e7292c0d77e')/XMLRecord/",
    data: JSON.stringify(record),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function() {
        alert("Success");
    },
    error: function(xhr) {
        alert("fail");
    }
});

UPDATE:

Debug Message from Fire Bug:

Preferences

POST http://localhost:49223/Form/WebDataService.svc/X...ef3a0-d6df-45bf-a8f6-3e7292c0d77e%27)/XMLRecord/

POST http://localhost:49223/Form/WebDataService.svc/XMLForm(guid%271eaef3a0-d6df-45bf-a8f6-3e7292c0d77e%27)/XMLRecord/

jquery....min.js (line 127)
POST http://localhost:49223/Form/WebDataService.svc/X...ef3a0-d6df-45bf-a8f6-3e7292c0d77e%27)/XMLRecord/

POST http://localhost:49223/Form/WebDataService.svc/XMLForm(guid%271eaef3a0-d6df-45bf-a8f6-3e7292c0d77e%27)/XMLRecord/

201 Created 6.7s

POST http://localhost:49223/Form/WebDataService.svc/X...ef3a0-d6df-45bf-a8f6-3e7292c0d77e%27)/XMLRecord/

POST http://localhost:49223/Form/WebDataService.svc/XMLForm(guid%271eaef3a0-d6df-45bf-a8f6-3e7292c0d77e%27)/XMLRecord/

201 Created


get readyState 4

get responseText "{ "d" : {\r\n"__metadata"...\')/XMLForm"\r\n}\r\n}\r\n} }"

get responseXML null

get status 201

get statusText "Created"

Answer 1

You have to send { dataType: 'text' } to have the success function work with jQuery and empty responses.

Answer 2

Solution:

even though I still cant work out how I getting error from previous code, I got this alternative solution which works for me. (at least for now).

would love to hear more ideas

thank you all

$.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url: "http://localhost:49223/Form/WebDataService.svc/XMLForm(guid'1eaef3a0-d6df-45bf-a8f6-3e7292c0d77e')/XMLRecord/",
            data: JSON.stringify(record),
            complete: function(xhr) {
                if (xhr.readyState == 4) {
                    if (xhr.status == 201) {
                        alert("Created");
                    }
                } else {
                    alert("NoGood");
                }
            }
            //                
            //                success: function(data) {
            //                    alert("Success");
            //                },
            //                error: function(xhr) {
            //                    alert("fail" + xhr);
            //                }
        });

Answer 3

This happens not because a 201 with no content is necessarily considered invalid but because parsing the empty string ("") is a JSON parse error.

This behavior can be changed globally or per-request by setting a dataFilter.

$.ajaxSetup({
    dataFilter: function(data, dataType) {
        if (dataType == 'json' && data == '') {
            return null;
        } else {
            return data;
        }
    }
});

Answer 4

I had this happen to me earlier. My problem was not including a '.json' extension at the end of my query string, so I was getting XML back. jQuery choked on trying to parse the xml as json, causing the error handler to get called.

Answer 5

I use jQuery_2.1.1 and had similar problem PUT went to error() handler. My REST api call principal is

• PUT to named key path (/rest/properties/mykey1): 204=Updated existing object, 201=Created new object and return Location header, XXX=anything else most like an error
• POST to unknown key path (/rest/properties): 201=Created new object and return Location header, XXX=anything else most like an error

Http status 204 is NoContent so jQuery was fine with it, but 201=Created was expecting json body object but I returned zero length body part. Resource address was given in a location response header.

I may return json object depending on few corner cases so had to use datatype:"json" attribute. My jQuery solution was error() check for 201 status and call success() function.

$.ajax({
    url: "/myapp/rest/properties/mykey1",
    data: jsonObj, 
    type: "PUT",
    headers: { "Accept":"application/json", "Content-Type":"application/json" },
    timeout: 30000,
    dataType: "json",
    success: function(data, textStatus, xhr) {
        data="Server returned " + xhr.status;
        if (xhr.status==201) data+=" "+xhr.getResponseHeader("location");
        $("#ajaxreply").text(data);
    },
    error: function(xhr, textStatus, ex) {
        if (xhr.status==201) { this.success(null, "Created", xhr); return; }
        $("#ajaxreply").text( textStatus + "," + ex + "," + xhr.responseText );
    }
});     

Answer 6

I've answered this on other similar thread:

I had the same problem and one thing that solved it for me was leaving the "dataType" unsetted. When you do this jQuery will try to guess the data type the server is returning and will not throw an error when your server returns a 201 with no content.