jQuery.ajax() - undefined data returned in IE9

Question

i have a very simple code:

$.ajax({
  cache: false,
  dataType: 'html',
  complete: function(jqXHR){
    console.log(jqXHR.responseText);
  },
  success: function(data){
    console.log(data);
  },
  url: 'http://follows.pl/pages/ajaxtest'
});

it returns some text in ff, chrome and IE8, but in IE9 it shows twice "undefined".

I've looked into developer tool in IE9, and it showing a normal response so the request works fine, response is fine, but variables are undefined

headers of response:

Response    HTTP/1.1 200 OK
Cache-Control   no-cache
Content-Type    text/html; charset: UTF-8
Pragma  no-cache

response

string(4) "test"

Answer 1

I suspect this is your problem:

Content-Type    text/html; charset: UTF-8

That value is not correctly formatted (the ':' after charset is wrong) and IE9 doesn't like it, but silently fails instead of saying something useful. Try this:

Content-Type:    text/html;charset=utf-8

Answer 2

I tried everything to solve this problem of ajax posting on IE browser (e.g. adding to the jquery ajax object no cache, dataType, configType, etc...), but at end the problem was not in ajax/javascript but in the PHP file: only for IE browser the PHP file had to start with the following header:

header("Content-type: text/html; charset=utf-8");

so, you have to explicitly indicate the content type of the php page that you get as result of your ajax call.

Example, assuming a html page called one.html where you place your javascript and a php page called two.php

In one.html set javascript as

var url = 'two.php';
$.ajax({
url: url,
type: "POST",
success: function(response){
alert(response)
}
});

In two.php page set as follows:

<?php
header("Content-type: text/html; charset=utf-8");
echo ('stuff to do');
?>

in this way for me it worked like a charm!