编辑：

Question

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

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

在纯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);

这就是我尝试使用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();
});

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

那么，负责这个的功能是什么？

编辑：

解决方案是使用属性beforeSend，如下所示：

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

Answer 1

您需要在提交处理程序中发送ajax请求...当您说$.ajax(..)发送了ajax请求时，因为您已将代码放在全局上下文中this指向该窗口对象

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();
});

Answer 2

它可能会奏效。您可以使用beforeSend显示加载图片并将其隐藏在done。

与ajax / jQuery中的done函数相反的函数

编辑：

2 个答案: