Why is IE 10 Refusing to send POST data via jQuery

2019-01-13 18:37发布

站内文章 / jQuery

35 0

姐就是有狂的资本

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

Steps to Life Shop, Health Products

回答1:

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>

回答2:

I have the same issue. I think its a bug on ie 10 desktop version. running on windows 8 pro 64bit. it seems like the xhr.send method is not passing the data through. it works fine in all other browsers and ie 10 in metro mode or if you change to ie9 standards in desktop mode.

回答3:

Sorry, but my all attempts to reproduce your problems were without success. In other words all POSTs were with HTTP body and the Ajax requests worked correctly. So I could not reproduce the problem which you described. I made all tests on Internet Explorer 10, Windows 8 W64 RTM Enterprise with all current windows updates.

If I add some item (for example the first one) to the chat on the page you referenced I can see that POST request the the following header will be produced:

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

One can see that Content-Length is 81 and it's not 0. The body is

i=1211&q=1&token=00f5e9f5768d09ae67f2016ebcb62e99a0d75345&cmd=addToCart&sideBar=1

The request will be answered with HTML fragment and the button become green.

To be exactly during adding the item to the chat it will be executed another code as you posted in your question. It will be executed the following code (lines 49-74) from 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();
        }
    });
}

The values of local i and q variables was 1211 and 1 in my test.

So I could not see any errors which you describe. So you have to debug the code in your environment where it will be reproduced. During the tests I would recommend you to use non-minimized code of jQuery. You could debug the code of jQuery.ajax to localize your problem.

Nevertheless I have some additional advice to you:

First of all you should include error callback to the $.ajax call and not only success callback.
You should review the JavaScript code which you use. In the above code fragment for example you defined global variable n which will be property of the global window object. Introduction of such variables is very dangerous because of side effects and conflicts with other JavaScript codes which you include on the page. In some other places you set new properties of global window object indirectly. For example the code of global doErrors function defined in common.1345011838.js looks as following

function doErrors(e,d){
    e=e.split(',');
    for(i in e){
        $((d?d+' ':'')+'[name="'+e[i]+'"]:visible').addClass('error');
    }
    errors();
}

In the above code you use i variable without define it. So you set (or use) window.i variable in the way. It's clear the usage of for-in loop in case of array is not good. One could rewrite the code with equivalent code like for(var i=0,l=e.length; i<l; i++) {...}.

Moreover you start the code of common.1345011838.js with

var w,r,i,p,t,l,c,z,e,m,b,k,u,s,CPH,TOKEN;
var z = new Array();
var ROOT;

which define many global variables with short names. It's very bad style. It can follow to conflicts with other modules which you included. Typically it would be enough to define the most variables which you need inside of some function. You could move declaration of the most variables inside of $(document).ready(function(){/*.HERE.*/});.

If you really need to define some global variables you could define one which will be like the namespace and all other variables you could define as the properties of the only global object. It's the standard practice. In the way one can reduce the number of possible conflicts between different modules which you use. For example you could use something like

MYGLOBALCHATOBJECT = {
    root: "/",
    z: [],
};

...
// add new property
MYGLOBALCHATOBJECT.TOKEN = "some value";

You should confider to define many function inside of context of another functions. In the way you could reduce the need to define many global variables. Just an example The above code of inCart use n variable defined above of inCart function. The variable n will be used only inside of other global function flashCart defined directly after inCart. Moreover the function flashCart will be used only inside of callback success. So you can rewrite the code so, that you define both n and flashCart inside of callback 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
}

I would recommend you additionally to test your code in JSHint or JSLint.

回答4:

I also faced same issue, Below changes worked for me.

<meta http-equiv="x-ua-compatible" content="IE=9" >

Worked for me :)

回答5:

Facing this same issue I was not able to solve by setting <meta http-equiv="x-ua-compatible" content="IE=9">, I have however forced this by setting the response header X-UA-Compatible to IE9 which is the recommended way as the meta header is unrecognised in HTML5 validators.

For J2EE applications this can be achieved with the following filter:

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() {
    }
}

And registering in your 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:

I have something similar (Problems with image upload from browsers to Amazon S3), and I have found that in my case the xhr object crashes when it is post-requesting http://some.server.com from https://my.local.server.com:123/foo. It crashes on xhr.open("POST", httpUrl, true) call.

It probably is an IE10 bug (what a surprise ;) ), it is crashing both on Win7, and Win8.

回答7:

I had this same issue but just with a single request, a I mean I have a web app that handles many ajax requests. Check out your markup. I had the form inside a table for layout

<table>
    <form></form>
</table>

I just change it the other way. form > table.

回答8:

There seems to be a Window 8 issue, making cross-domain https requests. I can't confirm if it has anything to do with the validity of the cert, as the one on my cross-domain server is invalid (dev server).

This link is a workaround, but who wants to bootstrap their entire application to make a GET request just for IE10+? http://jonnyreeves.co.uk/2013/making-xhr-request-to-https-domains-with-winjs/