Почему IE 10 отказывается отправлять данные POST через jQuery $.ajax
В моей среде разработки и производства IE 10 отказывается отправлять любые данные POST с помощью простого вызова $.ajax.
Мой script выглядит следующим образом:
d = 'testvar=something';
$.ajax({
data: d,
success: function(h){
console.log(h);
}
});
Выполняется фактический запрос ajax, но нет данных post
Заголовки запросов выглядят нормально:
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
Но тело запроса пусто! (Я использую вкладку сети IE в своей панели F12 dev для захвата запросов). В PHP script, print_r($_POST); возвращает пустой массив.
Это отлично работает в IE 7-9, хром, FF и сафари, но ломается в IE10?
Я не уверен, что я что-то пропустил, или если IE 10 просто глючит?
ИЗМЕНИТЬ
Я установил глобальные настройки ajax следующим образом:
$.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'
});
Дальнейшее редактирование
Использование IE версии 10.0.9200.16384 для Windows 8 Pro 64 бит
Прямая копия/вставка заголовков запроса:
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
Тело запроса является emtpy.
Заголовки откликов:
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
Инициатор
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/
Страница, которая реплицирует проблему (на самом деле весь сайт):
Шаги к жизни, продукты для здоровья
Ответы
Ответ 1
Edited
Тем не менее для Microsoft нет исправления, кроме использования
<meta http-equiv="x-ua-compatible" content="IE=9" >
добавив выше метатег, IE10 будет запускать ваш javascript в IE9 совместимый режим.
Старый ответ.
Я отправляю образец кода для теста, который я сделал, и вы также можете использовать тот же код для своего кода.
<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>
Ответ 2
У меня такая же проблема. Я думаю, что это ошибка, то есть 10 настольных версий. работает на windows 8 pro 64bit.
похоже, что метод xhr.send не передает данные через. он отлично работает во всех других браузерах, т.е. в 10 в режиме метро, или если вы измените стандарт на 9 в режиме рабочего стола.
Ответ 3
Извините, но все мои попытки воспроизвести ваши проблемы были безуспешными. Другими словами, все POST были с телом HTTP, и запросы Ajax работали правильно. Поэтому я не смог воспроизвести описанную вами проблему. Я провел все тесты в Internet Explorer 10, Windows 8 W64 RTM Enterprise со всеми текущими обновлениями Windows.
Если я добавлю какой-нибудь элемент (например, первый) в чат на странице, на которую вы ссылаетесь, я вижу, что POST-запрос будет создан следующий заголовок:
Anforderung POST /~do HTTP/1.1
Accept */*
Content-Type application/x-www-form-urlencoded; charset=UTF-8
X-Requested-With XMLHttpRequest
Referer https://www.steps.org.au/
Accept-Language de-DE,de;q=0.8,ru;q=0.7,en-US;q=0.5,en;q=0.3,ja;q=0.2
Accept-Encoding gzip, deflate
User-Agent Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; Touch)
Host www.steps.org.au
Content-Length 81
DNT 1
Connection Keep-Alive
Cache-Control no-cache
Cookie __utmc=91949528; __utma=91949528.365135675.1353268932.1353268932.1353268932.1; __utmb=91949528.1.10.1353268932; __utmz=91949528.1353268932.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); PHPSESSID=ka4shsgkfvnvfdcath2klh9un0; cartID=4a90a72a379989f597276ca30c79c6f6
Можно видеть, что Content-Length равно 81, а не 0. Тело
i=1211&q=1&token=00f5e9f5768d09ae67f2016ebcb62e99a0d75345&cmd=addToCart&sideBar=1
На запрос будет дан фрагмент HTML, а кнопка станет зеленой.
Чтобы быть точным во время добавления элемента в чат, он будет исполнен другим кодом, который вы отправили в свой вопрос. Он будет исполнен следующий код (строки 49-74) из shop.1352417874.js:
var n;
function inCart(i,t){
var a = $('#add'+i);
var q = t?1:$('#qty'+i).val();
setLoader(a,(t?60:0),0);
if(!t) a.addClass('loading').html('').attr('href','javascript:;');
// d = 'i='+i+'&q='+q+'&token='+TOKEN+'&cmd=addToCart&sideBar=1';
$.ajax({
data: {
i:i,
q:q,
token:TOKEN,
cmd:"addToCart",
sideBar: 1
},
success: function(h){
$('#sideCartContents').replaceWith(h);
mkButtons();
jsEnhance();
setLoader();
n=0;
if(!t) a.removeClass('loading').addClass('green').attr('href','Shop/Checkout.html').html('Checkout').parent().find('div.QTY').html('<strong>x'+q+'</strong> <span class="inC">in cart</span>');
flashCart();
}
});
}
Значения локальных переменных i и q в моем тесте были 1211 и 1.
Таким образом, я не вижу ошибок, которые вы описываете. Таким образом, вы должны отлаживать код в своей среде, где он будет воспроизводиться. Во время тестов я бы рекомендовал использовать неиндексированный код jQuery. Вы можете отладить код jQuery.ajax, чтобы локализовать вашу проблему.
Тем не менее, у меня есть несколько дополнительных советов:
- Прежде всего, вы должны включить обратный вызов
error к вызову $.ajax, а не только success обратный вызов.
- Вам следует просмотреть код JavaScript, который вы используете. В приведенном выше фрагменте кода, например, вы указали переменную global
n > , которая будет являться свойством глобального объекта window. Введение таких переменных очень опасно из-за побочных эффектов и конфликтов с другими кодами JavaScript, которые вы указываете на странице. В некоторых других местах вы устанавливаете новые свойства глобального объекта window косвенно. Например, код глобальной функции doErrors, определенный в common.1345011838.js, выглядит следующим образом
function doErrors(e,d){
e=e.split(',');
for(i in e){
$((d?d+' ':'')+'[name="'+e[i]+'"]:visible').addClass('error');
}
errors();
}
В приведенном выше коде вы используете переменную i, не определяя ее. Таким образом, вы устанавливаете (или используете) переменную window.i в пути. Ясно, что использование цикла for-in в случае массива не очень хорошо. Можно переписать код с эквивалентным кодом, например for(var i=0,l=e.length; i<l; i++) {...}.
Кроме того, вы начинаете код common.1345011838.js с
var w,r,i,p,t,l,c,z,e,m,b,k,u,s,CPH,TOKEN;
var z = new Array();
var ROOT;
которые определяют многие переменные global с короткими именами. Это очень плохой стиль. Он может следовать за конфликтами с другими модулями, которые вы включили. Как правило, этого достаточно, чтобы определить большинство переменных, которые вам нужны внутри некоторой функции. Вы можете перемещать объявление большинства переменных внутри $(document).ready(function(){/*.HERE.*/});.
Если вам действительно нужно определить некоторые глобальные переменные, вы можете определить тот, который будет похож на пространство имен и все другие переменные, которые вы могли бы определить как свойства единственного глобального объекта. Это стандартная практика. В способе можно уменьшить количество возможных конфликтов между различными модулями, которые вы используете. Например, вы можете использовать что-то вроде
MYGLOBALCHATOBJECT = {
root: "/",
z: [],
};
...
// add new property
MYGLOBALCHATOBJECT.TOKEN = "some value";
Вы должны указать, чтобы определить многие функции внутри контекста других функций. В способе можно уменьшить необходимость определения многих глобальных переменных. Только пример. В приведенном выше коде inCart используется переменная n, определенная выше функции inCart. Переменная n будет использоваться только внутри другой глобальной функции flashCart, определенной непосредственно после inCart. Кроме того, функция flashCart будет использоваться только внутри обратного вызова success. Поэтому вы можете переписать код так, чтобы вы определяли как n, так и flashCart внутри обратного вызова success:
...
success: function (h) {
// define LOCAL variable n
var n = 0;
// define LOCAL function which can use outer variable n
function flashCart(){
if(n<3) {
setTimeout("flashCart()",120);
n=n+1;
}
$('#sideCartBox').toggleClass('highlighted');
}
$('#sideCartContents').replaceWith(h);
mkButtons();
jsEnhance();
setLoader();
if(!t) a.removeClass('loading').addClass('green').attr('href','Shop/Checkout.html').html('Checkout').parent().find('div.QTY').html('<strong>x'+q+'</strong> <span class="inC">in cart</span>');
flashCart(); // we use LOCAL function
}
Я бы порекомендовал вам дополнительно протестировать ваш код в JSHint или JSLint.
Ответ 4
Я также столкнулся с одной и той же проблемой. Ниже меня сработали изменения.
<meta http-equiv="x-ua-compatible" content="IE=9" >
Работал для меня:)
Ответ 5
Опираясь на эту же проблему, я не смог ее решить, установив <meta http-equiv="x-ua-compatible" content="IE=9">, но, тем не менее, это принудительно, установив заголовок ответа X-UA-Compatible на IE9, который является рекомендуемым способом, поскольку мета-заголовок непризнан в валидаторах HTML5.
Для приложений J2EE это может быть достигнуто с помощью следующего фильтра:
public class IECompatibilityFilter implements Filter {
private String compatibilityMode = "IE=10";
public IECompatibilityFilter() {
}
public String getCompatibilityMode() {
return compatibilityMode;
}
public void setCompatibilityMode(String compatibilityMode) {
this.compatibilityMode = compatibilityMode;
}
@Override
public void init(FilterConfig filterConfig) throws ServletException {
String mode = filterConfig.getInitParameter("compatibilityMode");
if (StringUtils.isNotBlank(mode)) {
this.compatibilityMode = StringUtils.trim(mode);
}
}
@Override
public void doFilter(ServletRequest request,
ServletResponse response,
FilterChain chain)
throws IOException, ServletException {
if (!response.isCommitted() && response instanceof HttpServletResponse) {
HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.addHeader("X-UA-Compatible", compatibilityMode);
}
chain.doFilter(request, response);
}
@Override
public void destroy() {
}
}
И зарегистрируйтесь в web.xml.
<filter>
<filter-name>ieCompatibilityFilter</filter-name>
<filter-class>com.foobar.web.filter.IECompatibilityFilter</filter-class>
<init-param>
<param-name>compatibilityMode</param-name>
<param-value>IE=9</param-value>
</init-param>
</filter>
Ответ 6
У меня есть что-то подобное (Проблемы с загрузкой изображений из браузеров в Amazon S3), и я обнаружил, что в моем случае объект xhr падает, запросив http://some.server.com из https://my.local.server.com:123/foo. Он выходит из строя на вызове xhr.open( "POST", httpUrl, true).
Вероятно, это ошибка IE10 (какой сюрприз;)), она разбивается как на Win7, так и на Win8.
Ответ 7
У меня была такая же проблема, но только с одним запросом, я имею в виду, что у меня есть веб-приложение, которое обрабатывает многие запросы ajax. Проверьте свою разметку. У меня была форма внутри таблицы для макета
<table>
<form></form>
</table>
Я просто изменил это по-другому. формa > таблица.
Ответ 8
Кажется, проблема с Window 8 делает запросы междоменные https. Я не могу подтвердить, имеет ли он какое-либо отношение к действительности сертификата, поскольку тот, что на моем междоменном сервере недействителен (dev-сервер).
Эта ссылка является обходным решением, но кто хочет загружать все свое приложение, чтобы сделать запрос GET только для IE10 +?
http://jonnyreeves.co.uk/2013/making-xhr-request-to-https-domains-with-winjs/
