AJAX load-eventlistener在从服务器获得响应之前触发 - AJAX load-eventlistener fires before getting response from server

AJAX load-eventlistener fires before getting response from server

我正在编写一个通过AJAX上传图像的代码片段。用户在表单文件输入中选择图像。表单有一个onsubmit-函数来防止默认，这样页面在提交后就不会重新加载。在这个函数中，捕获表单数据，然后通过XMLHttpRequest发送，该XMLHttpRequest附加了一些事件侦听器。还有"load"-eventlistener。这个"加载"函数包括隐藏加载器和返回"上传完成"之类的内容。通过ajax传输数据的页面有一个php脚本，它可以缩放图像、复制图像、重命名图像等等。它创建不同大小的图像的各种副本。

问题:如果我提交表单不是通过ajax，一切都很好。php需要一些时间，直到保存所有内容并加载页面。通过Ajax，直接提交表单后，它说"完成"，但php脚本没有执行!感觉就像AJAX阻止PHP运行脚本。"加载"函数被触发了!但是太早了!

JS-Code:

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>

我有一种感觉，为什么它被解雇太快的原因是你没有取消任何触发函数的默认动作。您需要调用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;
}

编辑:

你张贴了你叫它onsubmit，所以你需要取消提交。将return添加到onsubmit和上面的return false中。

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