Why is IE 10 Refusing to send POST data via jQuery $.ajax
Both in my development and production environment, IE 10 is refusing to send any POST data via a simple $.ajax call.
My script looks like this:
d = 'testvar=something';
$.ajax({
data: d,
success: function(h){
console.log(h);
}
});
The actual ajax request is going through, but no post data???
The request headers look normal:
Request POST /steps/~do HTTP/1.1
Accept */*
Content-Type application/x-www-form-urlencoded; charset=UTF-8
X-Requested-With XMLHttpRequest
Referer http://localhost:8080/steps/
Accept-Language en-GB,en-AU;q=0.7,en;q=0.3
Accept-Encoding gzip, deflate
User-Agent Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)
Host localhost:8080
Content-Length 0
DNT 1
Connection Keep-Alive
Cache-Control no-cache
But the request body is empty! (I'm using IE's network tab in their F12 dev bar to capture requests). In the PHP script, print_r($_POST); returns an empty array.
This works fine in IE 7 - 9, chrome, FF and safari, but breaks in IE10?
I'm not sure if I've missed something, or if IE 10 is just buggy?
EDIT
I've set the global ajax settings as follows:
$.ajaxSetup({
url: ROOT+'~do', // ROOT is either http://localhost/.../~do or http(s)://www.steps.org.au/~do depending on production or development environment
type: 'POST'
});
Further Edit
Using IE version 10.0.9200.16384 on Windows 8 Pro 64 bit
Direct copy/paste of request headers are:
Key Value
Accept */*
Accept-Encoding gzip, deflate
Accept-Language en-GB,en-AU;q=0.7,en;q=0.3
Cache-Control no-cache
Connection Keep-Alive
Content-Length 0
Content-Type application/x-www-form-urlencoded; charset=UTF-8
Cookie __utma=91949528.1947702769.1348201656.1353212510.1353237955.6; __utmz=91949528.1348201656.1.1.utmcsr=localhost|utmccn=(referral)|utmcmd=referral|utmcct=/coconutoil.org.au/; __utmb=91949528.2.10.1353237955; __utmc=91949528; cartID=8b3b2b9187cfb1aeabd071d6ec86bbbb; PHPSESSID=bl57l7fp0h37au7g0em7i3uv13
DNT 1
Host www.steps.org.au
Referer https://www.steps.org.au/
Request POST /~do HTTP/1.1
User-Agent Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)
X-Requested-With XMLHttpRequest
The Request body is emtpy.
Reponse headers:
Key Value
Response HTTP/1.1 200 OK
Server nginx/0.7.65
Date Sun, 18 Nov 2012 11:23:35 GMT
Content-Type text/html
Transfer-Encoding chunked
Connection close
X-Powered-By PHP/5.3.5-1ubuntu7.2ppa1~lucid
Expires Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma no-cache
Initiator
Property Value
Stage Document Processing
Element XMLHttpRequest
Action Processing
Document ID 0
Frame ID 0
Frame URL https://www.steps.org.au/Shop/Health-Products/
Page which replicates the problem (the entire site actually):
Answer
Edited
Still there is no fix from Microsoft for this except using
<meta http-equiv="x-ua-compatible" content="IE=9" >by add the above meta tag, IE10 will run your javascript in IE9 compatible mode.
Old answer.
i am posting the sample code for the test that i made, and you can also utilize the same code for your code.
<html>
<head runat="server">
<script src="../Scripts/jquery-1.8.3.js"></script>
<script type="text/javascript">
var xmlHttp = null;
var XMLHTTPREQUEST_MS_PROGIDS = new Array(
"Msxml2.XMLHTTP.7.0",
"Msxml2.XMLHTTP.6.0",
"Msxml2.XMLHTTP.5.0",
"Msxml2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP"
);
function makePOSTRequest(url, parameters) {
if (window.XMLHttpRequest != null) {
//xmlHttp = new window.XMLHttpRequest();
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
} else if (window.ActiveXObject != null) {
// Must be IE, find the right ActiveXObject.
var success = false;
for (var i = 0; i < XMLHTTPREQUEST_MS_PROGIDS.length && !success; i++) {
alert(XMLHTTPREQUEST_MS_PROGIDS[i])
try {
xmlHttp = new ActiveXObject(XMLHTTPREQUEST_MS_PROGIDS[i]);
success = true;
} catch (ex) { }
}
} else {
alert("Your browser does not support AJAX.");
return xmlHttp;
}
xmlHttp.onreadystatechange = alertContents;
xmlHttp.open('POST', url, true);
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
//xmlHttp.setRequestHeader('Content-type', 'application/json;');
xmlHttp.setRequestHeader('Content-Length', parameters.length);
xmlHttp.setRequestHeader('Accept', 'text/html,application/xhtml+xml')
//xmlHttp.setRequestHeader('Connection', "close");
xmlHttp.send(parameters);
}
function alertContents() {
// alert( this.status );
if (xmlHttp.readyState == 4) {
//alert( this.responseText );
if (xmlHttp.status == 200) {
var result = xmlHttp.responseText;
// document.getElementById('result').innerHTML = result;
// document.getElementById('submitbutton').disabled = false;
alert(result);
} else {
//alert( this.getAllResponseHeaders() );
alert("There was a problem with the request.");
}
}
}
</script>
</head>
<body>
<a href="javascript:makePOSTRequest('/api/jobs/GetSearchResult','jtStartIndex=0&jtPageSize=10&jtSorting=jobDescription ASC&jobDescription=')">Click me please</a>
GetJobDetail
<br/><br/>
Url: <input type="text" id="url" value="/api/jobs/GetSearchResult"/><br/>
parameters: <input type="text" id="parameters" value="jtStartIndex=0&jtPageSize=10&jtSorting=jobDescription ASC&jobDescription="/><br/>
submit : <input type="button" id="callMethod" value = "call" onclick="javascript: makePOSTRequest($('#url').val(), $('#parameters').val())"/>
</body>
</html>