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（）将不会在回调后提交表单。

注意：使用本机提交功能成功验证后，页面上的表单将被提交。我不能弄乱那些代码，因为它属于我们的客户端，我们正在异步加载我们的代码。

已检查链接： using onbefore unload onbeforeunload with timeout

Answer 1

更改提交并改为按下按钮。并改变事件：

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

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（）需要使用所有参数写入，否则请求可能会失败 - {{3 }}

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);          
  }
}

Answer 3

您是否尝试过这样做：

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

这不是最漂亮的解决方案，但它应该有效。此外，您拼错了on（one），我也看不到e中的function(e)正在做什么。

修改试试这个

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

javascript：Internet Explorer在表单提交/页面卸载之前不发送ajax调用

3 个答案: