wcf call from $.ajax does not work in chrome

Question

I have peculiar problem trying to consume a simple WCF service from jquery. See the code below:

$(document).ready(function () { // Initialize the carousel on the header part of the page $("#myCarousel").carousel({ interval: 2000 });

// The handler for the submit button (login form)
$("#submit").click(function () {
    var sendData = '{"username": "' + 
                     $("#usernameTB").val() + 
                   '", "password": "' + 
                     CryptoJS.MD5($("#passwordTB").val()) + 
                   '"}';

    $.ajax("Services/LoginUser.svc/Login", {
        cache: false,
        type: "POST",
        data: sendData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        processData: true,
        complete: ServiceCompleted
    });
});

}); function ServiceCompleted(data) { alert("Response: " + data.responseText); }

When I use this code from IE, it works like a charm, that is, the call is executed and returns what I expect, see the below fiddler dumps of the request / response:

POST http://localhost/CanDoIT/Services/LoginUser.svc/Login HTTP/1.1
Accept: application/json, text/javascript, */*; q=0.01
Content-Type: application/json; charset=utf-8
X-Requested-With: XMLHttpRequest
Referer: http://localhost/CanDoIT/default.htm
Accept-Language: nl-NL,en-US;q=0.5
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Host: localhost
Content-Length: 64
Connection: Keep-Alive
Pragma: no-cache

{"username": "", "password": "d41d8cd98f00b204e9800998ecf8427e"}

HTTP/1.1 200 OK
Cache-Control: private
Content-Length: 10
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Mon, 29 Oct 2012 09:31:15 GMT

{"d":null}

If I do the same using Chrome, I get the following request / response dumps:

POST http://localhost/CanDoIT/Services/LoginUser.svc/Login HTTP/1.1
Host: localhost
Connection: keep-alive
Content-Length: 64
Origin: http://localhost
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4
Content-Type: application/json; charset=UTF-8
Accept: application/json, text/javascript, */*; q=0.01
Referer: http://localhost/CanDoIT/default.htm?
Accept-Encoding: gzip,deflate,sdch
Accept-Language: nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

{"username": "", "password": "d41d8cd98f00b204e9800998ecf8427e"}

HTTP/1.1 200 OK
Cache-Control: private
Content-Length: 10
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Mon, 29 Oct 2012 09:30:27 GMT

{"d":null}

Now, the alert does not show me the {"d":null} text.

Does anyone know what the difference is that is blocking me from using the responseText?

Flawless Flawless · Accepted Answer · 2012-10-29T12:52:37

I just found the solution to my problem after some googling around...

It seems that it is necessary that the click handler of the submit button on my form must return false to get it working.

I have no idea why, but it works...

wcf call from $.ajax does not work in chrome

1 Answers