AJAX load-eventlistener срабатывает перед получением ответа от сервера

Question

Я пишу фрагмент для загрузки изображений через AJAX. Пользователь выбирает изображение в файле-входе формы. Форма имеет функцию onsubmit, которая предотвращает дефолт, так что страница не перезагружается после отправки. В этой функции formdata захватывается и отправляется через XMLHttpRequest, в котором есть некоторые прослушиватели событий. Также «load» -eventlistener. Эта «нагрузка» -функция состоит из таких вещей, как скрытие загрузчика и эхо-то вроде «готовой загрузки». Страница, на которой данные передаются через ajax, имеет php-скрипт, который масштабирует изображение, копирует его, переименовывает и т. Д. К нему создаются различные копии в разных размерах изображения.

Проблема: если я отправлю форму НЕ через ajax, все будет в порядке. Php-требуется несколько секунд, пока все не будет сохранено и страница загружена. Через Ajax, сразу после отправки формы, он говорит «закончен», но php-скрипт не выполняется! Похоже, что AJAX останавливает запуск PHP скрипта. Функция «load» IS FIRED! Но путь к началу! Почти сразу же после подачи ...

Вот в JS-код:

loader("show"); 
window.event.preventDefault(); 
var data = $(form).serializeArray(); 
var src = form.getAttribute("action"); 
$.post(src, data) 
.done(function(data) { 
    loader("hide"); 
}); 

Я также протестировали с чистым JS, но та же проблема:

var formdata = $(form).serializeArray(); 
var page = form.getAttribute("action"); 
loader(show); 
var ajax = new XMLHttpRequest(); 
ajax.addEventListener("load", function(event) { completeHandler(event);}, false); 
ajax.open("POST",page); 
ajax.send(formdata); 

completeHandler:

function completeHandler (evt) { 
    alert("finished"); 
    loader("hide"); 
} 

Спасибо за помощь! :)

EDIT: HTML-:

<form method="post" action="create.php" onSubmit="uploadForm(this)" enctype="multipart/form-data"> 
<input id="file1" type="file" name="image"> 
<input type="submit" value="Add" name="submit"> 
</form> 

Answer 1

У меня есть чувство, причина, почему он стрелял слишком быстро, это вы не отменяя действие по умолчанию все, что запуск функции. Вам нужно либо позвонить preventDefault, либо return false, чтобы остановить действие по умолчанию, вызвав выход страницы, которая прерывает вызовы Ajax.

function uploadForm() { 
//function uploadForm (event) { 
    //event.preventDefault(); //cancel the default action 
    loader("show"); 
    //window.event.preventDefault(); <-- get rid of this 
    var data = $(form).serializeArray(); 
    var src = form.getAttribute("action"); 
    $.post(src, data) 
    .done(function(data) { 
     loader("hide"); 
    }); 
    //or 
    return false; 
} 

---

EDIT:

Вы писали вы вызываете его onsubmit так что вам нужно, чтобы отменить представление. Добавьте return в onsubmit и выше, используя метод return false.

<form onSubmit="return uploadForm(this)" ...>