JQuery Ajax 在 IE10 中不起作用

Question

背景

我想提交一个表单，停留在同一页面并获得回复。

下面提到的代码在 Chrome、Safari 和 Firefox 中完美运行。但是它在 IE10 中不起作用。

如何让它在 IE10 中运行？

我的分析正确性="questionable"

在 IE10 中，$('#amazonUpload').ajaxSubmit(options) 被执行，但是服务器端没有收到 Ajax 请求，因此客户端永远不会收到响应。

HTML

<form action="https://s3.amazonaws.com/adminportal" enctype="multipart/form-data" id="amazonUpload" method="post">   
    <input name="key" type="hidden" value="001e0000009vkRLAAY/Forms/${filename}" />             
    <input name="AWSAccessKeyId" type="hidden" value="client aws key" /> 
    <input name="policy" type="hidden" value="really long string" /> 
    <input name="signature" type="hidden" value="sign value=" />             
    <input name="acl" type="hidden" value="private" /> 
    <input name="Content-Type" type="hidden" value="application/octet-stream"/>
    <div id="uploadPage:block:j_id31"><div class="pbSubsection">      
    <input id="uploadfileOne" name="file" required="True" size="25" type="file" />
    <input class="btn" id="myBtnId55" name="myBtnId55" onclick="uploadActComplete();" style="display:none;" type="button" value="Upload" />     
</form>

JavaScript

function uploadActComplete(){
    loading();     
    var options = { 
    //      error: errorResponse,
    //       success: successResponse,
    complete: function(xhr, status) {
        alert('status is :- '+status );
        if(status =='success')
            successResponse(xhr, status);
        else if(status =='error')
            errorResponse(xhr, status);
    }
    }; 
    $('#amazonUpload').ajaxSubmit(options); 
    return false;
}

function errorResponse(xhr, status)  {     
    stoploading();    
    alert('File could not be uploaded, please try again.'); 
} 
function successResponse(xhr, status)  {     
    stoploading();    
    $("input[id$='invisiblesubmit']").click();
}

Answer 1

使用 fiddler 分析您的 ajax 调用 - 它会告诉您调用是否已进行。

Answer 2

我发现 IE 10+ 的最大问题是您使用的 JQuery 版本。 由于您没有说明您使用的是哪个版本，您应该验证您使用的是 JQuery 2.X 版本。

Jquery 1.X 分支适用于 IE 浏览器 8 或更低版本。 JQuery 2.X 分支适用于 IE9+ 浏览器、Chrome 和 FF。我还没有在 Safari 上尝试过。

还要验证您使用的 Jquery Forms 版本是否与 JQuery 2.x 兼容

有关更多信息，请阅读 JQuery 下载页面上的信息jquery.com/download

Answer 3

我已尝试在我的系统上复制您的代码。它就像一个魅力..

我使用以下 jquery 文件来实现上述功能。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script>

请检查您是否使用了正确的 jquery 文件。

我也尝试过发布到本地文件，并且那里正确收到了 ajax 请求。

Answer 4

您可以将时间戳附加到作为 GET 参数请求的 URL 的末尾。这就是我绕过 IE 缓存的方法。

var date = new Date();
var options = { 
    url: $('#amazonUpload').attr('action')+'?time='+date.getTime(),
    // Your other options
}
$('#amazonUpload').ajaxSubmit(options); 
return false;

Answer 5

你试过了吗？

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" >

更多信息在这里：http://code.gishan.net/code/solution-to-ie10-ajax-problem/

@Daniel Schwarz，也回答了。 :)

Answer 6

跟进@amrinder007 的回答，您可以尝试这种细微的变化

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

还有其他可能可行的选项：

"IE=edge"
"IE=10"
"IE=EmulateIE10"
"IE=9"
"IE=EmulateIE9
"IE=8"
"IE=EmulateIE8"
"IE=7"
"IE=EmulateIE7"
"IE=5"

Answer 7

尝试在对我有用的页面的 head 标记内添加元标记：-

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

IE10 像 IE9 一样工作

Answer 8

我只在 IE 10 上遇到过类似的情况。在随后的参数没有变化的请求中，不会发送到服务器并被视为缓存的。

在我的情况下，解决方案是从您的服务器发回 Cache-Control: no-cache 标头。它提供了更清晰的关注点分离。

在 ASP.Net 中我需要添加

HttpContext.Current.Response.AddHeader("Cache-Control", string.Empty);

或者

HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");

或

Response.AppendHeader("Cache-Control", "no-cache; private; no-store; must-revalidate; max-stale=0; post-check=0; pre-check=0; max-age=0"); // HTTP 1.1
Response.AppendHeader("Pragma", "no-cache"); // HTTP 1.1    

它解决了问题。