Ajax call from jquery works in firefox but not in IE8

Question

I'm using jquery and I make a ajax call to a webservice that returns some json data. This works perfect in firefox but for some reason not in IE.

$.ajax({
    type: "GET",
    url: "http://domain.com/Service.svc/data",
    dataType: "json",
    success: function(data) {
        //In firefox this shows the right value of test but in IE8 just "0", why?
        alert(data.d.test);
    }
});

I know that the content of the response (data) is:

{"d":{"__type":"MyContent:#","test":888.75,"test2":592.5}}

So the alert shows 888.75 in firefox but 0 in internet explorer. I can't see why this is happening?

Answer 1

Try this and see what happens:

  jQuery.get("http://domain.com/Service.svc/data", 
  function(data) {
      alert(data.d.test);
  },"json");

Not sure if this helps though...

Answer 2

Try running the same script without the dataType, you should get the raw JSON string as data. Alert that out and you'll see if the data is passed in the right form.

Answer 3

Try including the following options on your .ajax() call:

data: "{}",
contentType: "application/json; charset=utf-8",

There's a few ASP.Net and IE "gotchas" when consuming web services with jQuery. Read here for more information.

Answer 4

The thing was that IE had cache: true as standard, or at least I think it has as setting cache: false made the right data show. In IE it was always showing old data.

$.ajax({
    type: "GET",
    url: "http://domain.com/Service.svc/data", cache: false,
    dataType: "json",
    success: function(data) {
        alert(data.d.test);
    }
});