javascript: Internet Explorer не отправляет вызов ajax перед отправкой формы/страницей разгрузки

Question

Пытается отправить AJAX POST на форму submit. Уже есть код, работающий во всех браузерах, кроме 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

Если бы угробить общие 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);   
    } 
} 

Answer 2

Вы пробовали это сделать:

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

Это не самый красивый решение, но оно должно работать. Кроме того, вы опечатали on (one), и я не вижу, что делает e в function(e).

EDIT Попробуйте

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

Answer 3

изменения отправке и поставить кнопку вместо этого. и изменить событие:

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