如何在使用 jquery ajax 时立即显示加载消息？

Question

以下是我使用 jQuery Ajax 方法制作的 Ajax 代码。

$(".loading_msg").show();
$.ajax({
    type: "POST",
    url: "submit_ops.php?action=submit_form",
    data: $( "#frmMyForm" ).serialize(),
    success: function(result){
        if(result=='Success'){
            $("#msgContainer").html('<div style="color:#3CA322;font-weight:bold;font-size:14px;padding:10px;">Thank you.</div>');
            $("#msgContainer").fadeIn();
        }
        else{
            $("#msgContainer").html('<div style="color:red;font-size:12px;padding:10px;">' + result + '</div>');
            $("#msgContainer").fadeIn();
        }
    },
    error: function(){
        //console.log('error');
    },
    complete: function(){
        //console.log('complete');
        $(".loading_msg").hide();
        $("#submit").attr("disabled", false);
    }

});

所以逻辑是，每当即将发出 Ajax 请求时，

1. 首先显示 .login_msg 容器

2. 然后进行 ajax 调用

3. 完成后，.loading_msg 再次被隐藏。

现在的问题是，它无法正常运行。因此，当进行 ajax 调用时，浏览器会挂起几秒钟，但不会显示加载消息。但是当请求完成时，登录消息会出现半秒钟，然后它就消失了，因为我在请求完成时将其设置为隐藏。

所以我希望在发出请求之前显示 .login_msg。

对此有什么建议吗？提前致谢。

Answer 1

尝试使用$.ajax 的beforeSend 和complete 设置：

$.ajax({
    type: "POST",
    url: "submit_ops.php?action=submit_form",
    data: $( "#frmMyForm" ).serialize(),
    beforeSend:function(){
             $(".loading_msg").show();
        }
    complete:function(){
             $(".loading_msg").hide();
        }

    ....
    ....
});