the opposite function for the done function in ajax/jQuery

I want to send a form via Ajax, with jQuery.

我想通过Ajax使用jQuery发送表单。

On submitting the form, a loading image will be shown on the data transferring.

在提交表单时,将在数据传输上显示加载图像。

In pure JS I used this code :

在纯JS中我使用了这段代码:

var myForm = document.getElementById('myForm');
var xhr  = new XMLHttpRequest();

myForm.addEventListener('submit', function(e){
    var formData = new FormData(myForm);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200) {
            loading.style = "visibility:hidden;";
            alert('Authentification réussi.\n' + xhr.responseText );
        }else{
            loading.style = "visibility:visible;";
        }
    };
    xhr.open("GET", "authentification.php", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(formData);
    e.preventDefault();
}, false);

And this is what I tried using jQuery :

这就是我尝试使用jQuery:

var jqxhr = $.ajax({
    type        : $('#myForm').attr('method'),
    url         : $('#myForm').attr('action'),
    data        : $('#myForm').serialize(),
    dataType    : 'html'
});


$(function(){
    $('#myForm').submit(function(event){
        jqxhr.done(function(data){
            $('#loading').hide();
            alert(data);
        });
        //Here the other method
    });
    event.preventDefault();
});

The problem is I don't know what it the function that will be executed on sending data, in pure JS I just used the else statement for : xhr.readyState == 4 && xhr.status == 200.

问题是我不知道它将在发送数据时执行的功能是什么,在纯JS中我只使用了else语句:xhr.readyState == 4 && xhr.status == 200。

So, what is the function which is responsible for that ?

那么,对此负责的是什么功能呢?

Edit :

The solution was to use the attribute beforeSend as the following :

解决方案是使用beforeSend属性,如下所示:

jqxhr = $.ajax({
    type        : $(this).attr('method'),
    url         : $(this).attr('action'),
    data        : $(this).serialize(),
    dataType    : 'html',
    beforeSend  : function(){
                        $('#loading').show();
                    },
        complete    : function(){
                            $('#loading').hide();
                    }
})

2 个解决方案

#1

You need to sent the ajax request within the submit handler... when you say $.ajax(..) the ajax request is sent and the since you have placed the code in global context this refers to the window object.

您需要在提交处理程序中发送ajax请求...当您说$ .ajax(..)发送ajax请求时,由于您已将代码放在全局上下文中,因此它指的是窗口对象。

var jqxhr;
$(function () {
    $('#myForm').submit(function (event) {
        jqxhr = $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: 'html'
        }).done(function (data) {
            $('#loading').hide();
            alert(data);
        }).always(function () {
            jqxhr = undefined;
        });
        //Here the other method
    });
    event.preventDefault();
});

#2

It might work. You can use beforeSend to show your loading image and hide it on done.

它可能会奏效。您可以使用beforeSend显示加载图像并将其隐藏完成。