AJAX .done() returns 实际响应成功前

Question

我有以下代码等待 AJAX 请求成为 completed/successful 然后它将重定向到不同的 url.

这是我的 AJAX 请求的样子

 function UploadFile(contoller, File, RecordID, AuxID) {
    console.log("initialize uploading file: " + RecordID);
    const formData = new FormData();
    formData.append('RecordID', RecordID);
    formData.append('AuxID', AuxID);
    formData.append('File', File);

    return $.ajax({
        type: "POST",
        url: contoller,
        processData: false,
        contentType: false,
        cache: false,
        enctype: 'multipart/form-data',
        data: formData,
        dataType: 'json'
    })
}

我有另一个函数调用 AJAX 请求并重定向到另一个 url 如果响应成功（即：文件已成功上传到服务器）

    UploadFile(controller,
               file,
               ID
              ).done(
                    // redirects to different url
              ).fail(
                    console.log("file failed to upload")
              );

但是，我注意到 .done() 总是在文件完成上传到服务器之前执行。

如果我使用以下代码“成功”，那么它运行良好。成功参数后的回调函数只有在上传过程完成后才会调用。

 $.ajax({
                    type: "POST",
                    url: controller,
                    processData: false,
                    contentType: false,
                    cache: false,
                    enctype: 'multipart/form-data',
                    data: formData,
                    success: () => {
                           // redirects to url
                        })
                    },
                    error: function (ret) {
                       
                    },
                    dataType: 'json'
                });

我在其他 posts/documentation 中读到，新的 jquery 将“成功”替换为“.done()”，所以它们基本上是一样的，对吧？但是，我不确定为什么 .done() 对我的代码不起作用。

Answer 1

完成和失败都需要传递给它们的回调函数。

$.ajax returns 一个 jqXHR 对象。该对象包含 done 和 fail 方法。从这个 documentation 我们有：

deferred.done( doneCallbacks [ doneCallbacks ] )

其中：

完成回调类型：函数（）解析 Deferred 时调用的函数或函数数组。

所以一个例子看起来像这样：

$.get( "test.php" ).done(function() {
   alert( "$.get succeeded" );
 });

AJAX .done() returns 实际响应成功前

AJAX .done() returns before actual response is successful

ajax

jquery