JavaScript：Internet Explorer在提交表单/页面卸载前未发送ajax调用

Question

尝试在表单提交时发送AJAX POST请求。已经有一段代码在所有浏览器中工作，除了IE。

可以工作的代码（除了IE）

$('form').one("submit", function(e) {                   
    $.ajax(
     {
       url : url,
       type: "POST",
       data : data,
       async: false,
       complete: function() {  
       return true;
      }
     });  
    });

我已经尝试了几乎所有我知道的方法，例如onunload和onbeforeunload以及通常的onsubmit（原生JavaScript和jQuery方法）。但是IE不会等待AJAX调用完成，而是加载表单操作页面。 onbeforeunload可以使它等待，但会弹出确认对话框（我不想显示）。 此外，async：false在IE上不起作用。由于请求是跨域的，我不能使用HTTPRequest。同样，XDomainRequest是异步的，所以也没有用。 其他方式，如event.preventDefault()将不会在回调之后提交表单。 注意：页面上的表单在通过本地提交函数成功验证后被提交。我不能修改那段代码，因为它属于我们的客户，而我们正在异步加载我们的代码。 已经检查过以下链接： 使用onbeforeunload 带有超时的onbeforeunload

- Utkarsh Mishra

Answer 1

将提交按钮更改为一个按钮，并更改事件：

$('#submitbuttonid').on("click", function(e) {  
    e.preventDefault()                 
    $.ajax(
    {
         url : url,
         type: "POST",
         data : data
         complete: function() {  
             $('form').submit();
         }
    });  
});

- EduSanCon

---

嗨，感谢您的回答。问题不在于事件。在IE中，async:false无法正常工作。请您也检查一下。 - Utkarsh Mishra

但是使用这种方法，您不必将async设置为false。在ajax获得响应之前，表单不会提交。确保按钮不是提交按钮。 - EduSanCon

问题是，我的代码异步加载在客户端上，就像谷歌一样。因此我无法将它更改为按钮。虽然可以使用JavaScript实现，但对我来说并不是解决方案。 - Utkarsh Mishra

关于点击事件中的preventDefault()和完成回调中的submit()，您怎么看？我已经编辑了我的解决方案。 - EduSanCon

使用了一个解决方法，将该方法作为答案添加。感谢您的帮助。 - Utkarsh Mishra

Answer 2

我不得不放弃基于onsubmit/onclick回调事件的一般性方法。使用了一个变通方法。浏览器可以使用localStorage全局对象在同一窗口/标签上保存数据。

因此，在提交按钮点击时，将数据保存在localStorage对象中。

$('input:image').click(function() {
//Yes, my client is using image as submit button. No biggie! 
//form data collection code here
localStorage.lc = JSON.stringify(data);
});

在下一页（表单的操作页），我的JS再次被加载。因此，我可以检查localStorage对象，并发送POST数据（使用XDomainRequest()进行跨域数据传输。还请注意，XDomainRequest()需要写入所有参数，否则请求可能会出现错误 - XDomainRequest Fix。）

window.onload = function() {
 if(localStorage.hasOwnProperty('lc'))
 {
  if(localStorage.lc.length > 0)
  {     
    dataStr = "";
    var lcData = JSON.parse(localStorage.lc);           
    for(var prop in lcData)
    {
      dataStr += "&" + prop + "=" + lcData[prop];
    }
    var url = "https://www.leadscapture.com/lead/track/trackId/" + lcData.trackId;
    var xdr = new XDomainRequest(); 
    xdr.open("POST", url);
    xdr.onload = function() {
      delete localStorage.lc;
    };
    xdr.onprogress = function(){ };
    xdr.ontimeout = function(){ };
    xdr.onerror = function () { };
    setTimeout(function(){
        xdr.send(dataStr.substring(1));
    }, 0);          
  }
}

- Utkarsh Mishra

Answer 3

你尝试过这样做吗：

$('#submitbuttonid').click(function() {                   
    $.ajax(
     {
       url : url,
       type: "POST",
       data : data,
       async: false,
       complete: function() {  
       return true;
      }
     });  
    });

这不是最美观的解决方案，但应该可以工作。另外，您拼错了on（写成了one），我也不知道function(e)中的e有什么作用。

编辑 尝试这个

$('form').submit(function() {                   
    $.ajax(
     {
       url : url,
       type: "POST",
       data : data,
       async: false,
       complete: function() {  
       return true;
      }
     });  
    });

- byc

---

嗨，谢谢你的回答。由于提交事件反复运行，我使用了“one”而不是“on”。请忽略字母“e”，我正在尝试使用“e.preventDefault()”。 - Utkarsh Mishra

尝试了按钮点击事件，但提交操作并没有等待该事件。请注意，在IE中，event:false不起作用。 - Utkarsh Mishra

你看过这个吗？https://dev59.com/JGgu5IYBdhLWcg3wOUkk - byc

谢谢，但不幸的是没有结果。事件已经被触发，但页面不会等待 AJAX 请求。我甚至在网络日志中看不到请求。 - Utkarsh Mishra