Wysyłanie żądania Ajax przed wysłaniem formularza

Question

Czy można wysłać żądanie ajax w onsubmit() formularza? Próbowałem tego, a wyniki są niestabilne, głównie dlatego, że prawdopodobnie jeśli przeglądanie zajmie więcej czasu, niż wysłanie mojego oryginalnego formularza, moje żądanie zostanie odrzucone, gdy tylko zmieni się lokalizacja załadowanej strony, więc czasami nigdy nawet nie trafi na serwer.

Zasadniczo chcę dodać moduł zbierający dzienniki inspekcji, który zbiera zdarzenia logowania, chcę je podłączyć do istniejących aplikacji przy minimalnej inwazji.

Answer 1

Jest to łatwo osiągalne. Po prostu wstrzymaj przesyłanie formularzy do czasu zakończenia żądania AJAX.

Utwórz swój formularz onsubmit, wywołaj funkcję AJAX i zwróć wartość false (co powoduje anulowanie przesyłania formularza). Po zakończeniu wywołania AJAX prześlij formularz programowo.

Na przykład:

<form name="myform" onsubmit="javascript: startAjax(); return false;"> 
... 
<script type="text/javascript"> 
function startAjax() {} // Calls ajaxComplete() when finished 

function ajaxComplete() 
{ 
    document.myform.submit(); 
} 
</script> 

Answer 2

Nie ma innego sposobu, aby rozwiązać ten problem, to można dokonać wywołania AJAX jako synchroniczny.

Przykład:

xmlhttp.open("GET", imageUrlClickStream, false); 

Dzięki temu możemy mieć pewność, że złożenie formularza będzie czekać aż do wywołania AJAX uzyskać odpowiedź.

Answer 3

Zamień onsubmit na onclick to działa dobrze dla mnie, ponieważ onsubmit będzie w pętli.

<form name="myform" onclick="javascript: startAjax(); return false;"> 
... 
<script type="text/javascript"> 
function startAjax() {} // Calls ajaxComplete() when finished 

function ajaxComplete() 
{ 
    document.myform.submit(); 
} 
</script>