Pourquoi est-ce IE 10 Refuser d'envoyer POST données via jQuery $ .ajax
Dans mon environnement de développement et de production, IE 10 refuse d’envoyer des données POST via un simple appel $ .ajax.
Mon script ressemble à ceci:
d = 'testvar=something';
$.ajax({
data: d,
success: function(h){
console.log(h);
}
});
La demande ajax réelle est en cours, mais pas de données post ???
Les en-têtes de requête semblent normaux:
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
Mais le corps de la requête est vide! (J'utilise l'onglet réseau d'IE dans leur barre de développement F12 pour capturer les demandes). Dans le script PHP, print_r($_POST); renvoie un tableau vide.
Cela fonctionne très bien dans IE 7 - 9, chrome, FF et Safari, mais des ruptures dans IE10?
Je ne suis pas sûr d'avoir oublié quelque chose ou si IE 10 est simplement un buggy?
MODIFIER
J'ai défini les paramètres globaux ajax comme suit:
$.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'
});
Édition ultérieure
Utilisation de IE version 10.0.9200.16384 sur Windows 8 Pro 64 bits
Les copier/coller directs des en-têtes de requête sont:
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
Le corps de la requête est vide.
En-têtes de réponse:
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
Initiateur
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 qui reproduit le problème (tout le site en fait):
Edité
Il n’existe toujours pas de solution de Microsoft pour cela, si ce n’est à l’aide de
<meta http-equiv="x-ua-compatible" content="IE=9" >en ajoutant la balise méta ci-dessus, IE10 exécutera votre javascript dans IE9 mode compatible.
Vieille réponse.
je poste l'exemple de code pour le test que j'ai fait, et vous pouvez également utiliser le même code pour votre 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>
Désolé, mais toutes mes tentatives pour reproduire vos problèmes ont été sans succès. En d'autres termes, tous les POST étaient avec HTTP corps et les requêtes Ajax fonctionnaient correctement. Je ne pouvais donc pas reproduire le problème que vous avez décrit. J'ai fait tous les tests sur Internet Explorer 10, Windows 8 W64 RTM Enterprise avec toutes les mises à jour actuelles de Windows.
Si j'ajoute un élément (par exemple le premier) à la discussion sur la page vous avez fait référence, je peux voir que POST demande l'enregistrement de l'en-tête suivant:
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
On peut voir que Content-Length est 81 et que ce n'est pas 0. Le corps est
i=1211&q=1&token=00f5e9f5768d09ae67f2016ebcb62e99a0d75345&cmd=addToCart&sideBar=1
La requête recevra une réponse avec fragment HTML et le bouton deviendra vert.
Pour être précis lors de l'ajout de l'élément au chat, il sera exécuté un autre code que vous avez posté dans votre question. Il sera exécuté le code suivant (lignes 49 à 74) de 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();
}
});
}
Les valeurs des variables locales i et q étaient 1211 et 1 dans mon test.
Je ne pouvais donc pas voir les erreurs que vous décrivez. Vous devez donc déboguer le code dans votre environnement où il sera reproduit. Pendant les tests, je vous recommanderais d'utiliser du code jQuery non minimisé. Vous pouvez déboguer le code de jQuery.ajax pour localiser votre problème.
Néanmoins, j'ai quelques conseils supplémentaires à vous donner:
- Tout d’abord, vous devez inclure le rappel
errorà l’appel$.ajaxet pas seulement le rappelsuccess. - Vous devriez revoir le code JavaScript que vous utilisez. Dans le fragment de code ci-dessus, par exemple, vous avez défini la variable globale
nqui sera la propriété de l'objet globalwindow. L'introduction de telles variables est très dangereuse à cause des effets secondaires et des conflits avec d'autres codes JavaScript que vous incluez sur la page. À d’autres endroits, vous définissez indirectement les nouvelles propriétés de l’objet globalwindow. Par exemple, le code de la fonction globaledoErrorsdéfinie dans common.1345011838.js ressemble à ce qui suit
function doErrors(e,d){
e=e.split(',');
for(i in e){
$((d?d+' ':'')+'[name="'+e[i]+'"]:visible').addClass('error');
}
errors();
}
Dans le code ci-dessus, vous utilisez la variable i sans la définir. Donc, vous définissez (ou utilisez) la variable window.i de la même manière. Il est clair que l'utilisation de la boucle for-in en cas de tableau n'est pas bonne. On pourrait réécrire le code avec un code équivalent tel que for(var i=0,l=e.length; i<l; i++) {...}.
De plus, vous commencez le code de common.1345011838.js avec
var w,r,i,p,t,l,c,z,e,m,b,k,u,s,CPH,TOKEN;
var z = new Array();
var ROOT;
qui définissent de nombreuses variables globales avec des noms abrégés. C'est très mauvais style. Cela peut entraîner des conflits avec d'autres modules que vous avez inclus. En règle générale, il suffirait de définir les les plus variables dont vous avez besoin dans une fonction. Vous pouvez déplacer la déclaration du plus grand nombre de variables dans $(document).ready(function(){/*.HERE.*/});.
Si vous avez vraiment besoin de définir des variables globales, vous pouvez définir un qui ressemblera à l'espace de noms et à toutes les autres variables que vous pouvez définir comme les propriétésobjet global. C'est la pratique standard. De la même manière, vous pouvez réduire le nombre de conflits possibles entre les différents modules que vous utilisez. Par exemple, vous pouvez utiliser quelque chose comme
MYGLOBALCHATOBJECT = {
root: "/",
z: [],
};
...
// add new property
MYGLOBALCHATOBJECT.TOKEN = "some value";
Vous devez vous assurer de définir plusieurs fonctions dans le contexte d'une autre fonction. De la même manière, vous pourriez réduire le besoin de définir de nombreuses variables globales. Juste un exemple Le code ci-dessus de inCart utilise la variable n définie ci-dessus dans la fonction inCart. La variable n sera utilisée uniquement à l'intérieur de autre fonction globale flashCart définie directement après inCart. De plus, la fonction flashCart sera utilisée uniquement dans callback success. Ainsi, vous pouvez réécrire le code afin de définir à la fois n et flashCart à l’intérieur du rappel 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
}
Je vous recommande également de tester votre code dans JSHint ou JSLint .
J'ai le même problème. Je pense que c'est un bogue sur la version de bureau 10. sous Windows 8 pro 64bit ..__, il semble que la méthode xhr.send ne transmet pas les données. cela fonctionne très bien dans tous les autres navigateurs et par exemple 10 en mode métro ou si vous passez aux normes ie9 en mode bureau.
J'ai également rencontré le même problème, les modifications ci-dessous ont fonctionné pour moi.
<meta http-equiv="x-ua-compatible" content="IE=9" >
Travaillé pour moi :)
Face à ce même problème que je n’ai pas pu résoudre en définissant <meta http-equiv="x-ua-compatible" content="IE=9">, j’ai toutefois forcé cette opération en définissant l’en-tête de réponse X-UA-Compatible sur IE9, ce qui est recommandé car l’en-tête méta n’est pas reconnu dans les validateurs HTML5.
Pour les applications J2EE, cela peut être réalisé avec le filtre suivant:
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() {
}
}
Et en vous inscrivant dans votre 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>
J'ai quelque chose de similaire ( Problèmes liés au téléchargement d'images depuis des navigateurs vers Amazon S3 ), et j'ai constaté que, dans mon cas, l'objet xhr se bloque lorsqu'il envoie une requête http://some.server.com from https://my.local.server.com:123/foo . Il se bloque lors de l'appel de xhr.open ("POST", httpUrl, true).
C'est probablement un bogue IE10 (quelle surprise;)), il plante à la fois sous Win7 et sous Win8.
J'ai eu le même problème, mais avec une seule demande, je veux dire, j'ai une application Web qui gère de nombreuses demandes ajax. Vérifiez votre balisage. J'ai eu la forme à l'intérieur d'une table pour la mise en page
<table>
<form></form>
</table>
Je viens de le changer dans l'autre sens. formulaire> table.