web-dev-qa-db-fra.com

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):

Steps to Life Shop, Produits de santé

21
Emmanuel

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>
7
Cruiser KID

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:

  1. Tout d’abord, vous devez inclure le rappel error à l’appel $.ajax et pas seulement le rappel success.
  2. Vous devriez revoir le code JavaScript que vous utilisez. Dans le fragment de code ci-dessus, par exemple, vous avez défini la variable globalen qui sera la propriété de l'objet global window. 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 globaledoErrors dé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 .

4
Oleg

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.

4
DeniroSA

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 :) 

2
www.amitpatil.me

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>
1
Brett Ryan

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.

0
Sasa

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.

0
Ricbermo