web-dev-qa-db-ja.com

なぜIE 10送信を拒否するPOST jQuery $ .ajax経由のデータ

私の開発環境と本番環境の両方で、IE 10は単純な$ .ajax呼び出しを介してPOSTデータを送信することを拒否しています。

私のスクリプトは次のようになります：

_d = 'testvar=something';
$.ajax({
    data: d,
    success: function(h){
        console.log(h);
    }
});
_

実際のajaxリクエストは通過していますが、投稿データはありません???

リクエストヘッダーは正常に見えます。

_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
_

しかし、リクエストの本文は空です！ （私はF12開発バーのIEのネットワークタブを使用してリクエストをキャプチャしています）。 PHPスクリプトでは、print_r($_POST);は空の配列を返します。

これはIE 7-9、chrome、FF、safariでは正常に機能しますが、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'
});
_

さらに編集

Windows 8 Pro 64ビットでIEバージョン10.0.9200.16384を使用

リクエストヘッダーの直接コピー/貼り付けは次のとおりです。

_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
_

リクエストの本文は空です。

応答ヘッダー：

_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/
_

問題を再現するページ（実際にはサイト全体）：

ライフショップ、健康製品へのステップ

jquerypostinternet-explorer-10
21
Emmanuel

編集済み

まだ使用することを除いてこれに対するマイクロソフトからの修正はありません

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

申し訳ありませんが、あなたの問題を再現するための私のすべての試みは成功しませんでした。つまり、すべてのPOSTは with HTTP bodyであり、Ajaxリクエストは正しく機能していました。だから私はあなたが説明した問題を再現することができませんでした。 Internet Explorer 10、Windows 8 W64ですべてのテストを行いましたRTM現在のすべての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フラグメントで応答され、ボタンが緑色になります。

チャットにアイテムを追加している最中にそうするために、質問に投稿した別のコードが実行されます /。 shop.1352417874.js から次のコード（49〜74行目）が実行されます。

_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のコードをデバッグして、問題を特定することができます。

それにもかかわらず、私はあなたにいくつかの追加のアドバイスを持っています：

  1. 最初に、errorコールバックだけでなく、_$.ajax_コールへのsuccessコールバックを含める必要があります。
  2. 使用するJavaScriptコードを確認する必要があります。たとえば、上記のコードフラグメントでは、グローバルnオブジェクトのプロパティとなるglobal variable windowを定義しました。そのような変数の導入は、副作用と、ページに含めた他のJavaScriptコードとの競合のために非常に危険です。他のいくつかの場所では、 global windowオブジェクトの新しいプロパティを間接的に設定します。例えば common.1345011838.js で定義された global doErrors関数のコードは次のようになります
_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.*/});内に移動できます。

本当に global 変数を定義する必要がある場合は、 one を定義できます。これは、名前空間のようになり、他のすべての変数を properties のみのグローバルオブジェクト。これは標準的な方法です。このようにして、使用する異なるモジュール間で発生する可能性のある競合の数を減らすことができます。たとえば、次のようなものを使用できます

_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
Oleg

同じ問題があります。つまり、10デスクトップバージョンのバグだと思います。 Windows 8 Pro 64ビットで実行されています。 xhr.sendメソッドがデータを渡していないようです。他のすべてのブラウザ、つまりメトロモードで10、またはデスクトップモードでie9標準に変更した場合は正常に動作します。

4
DeniroSA

私も同じ問題に直面しました。以下の変更でうまくいきました。

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

私のために働いた:)

2
www.amitpatil.me

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

クロスドメインhttpsリクエストを行うWindow 8の問題があるようです。クロスドメインサーバー（開発サーバー）の証明書が無効であるため、証明書の有効性と関係があるかどうかを確認できません。

このリンクは回避策ですが、bootstrapアプリケーション全体でIE10 +だけのためにGETリクエストを作成したいですか？ http://jonnyreeves.co.uk/2013/making- xhr-request-to-https-domains-with-winjs /

0
Dog

私は似たようなものを持っています（ ブラウザからAmazon S3への画像アップロードの問題 ）。私の場合、xhrオブジェクトがpost-requestingのときにクラッシュすることを発見しました http：// some .server.comhttps://my.local.server.com:123/foo からxhr.open（ "POST"、httpUrl、true）呼び出しでクラッシュします。

それはおそらくIE10のバグです（驚きです;））、Win7とWin8の両方でクラッシュしています。

0
Sasa

これと同じ問題が発生しましたが、1つのリクエストだけで、多くのajaxリクエストを処理するWebアプリがあるということです。マークアップを確認してください。レイアウト用のテーブルの中にフォームがありました

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

逆に変更するだけです。フォーム>テーブル。

0
Ricbermo