如何在使用Ajax jQuery時顯示加載程序

Question

我無法在ajax jQuery調用中調用loader。

我想在我的ajax調用api時顯示加載程序，並在ajax完成api調用時隱藏。

我有2個JavaScript文件。

1是主要signin.js，其中我調用了ajax方法

_signin.SignIn = function () {
        debugger;

        var obj = {};
        obj.user_name = $("#email").val();
        obj.password = $("#password").val();
        CallSignIn(user, 'signin', obj, _signin.onsuccesssignin, '');
    };

2是CallSignIn方法上方的調用

function CallSignIn(baseUrl, strUrl, strData, onSuccess, onFailure) {
    debugger;

    strUrl = baseUrl + strUrl;
    $.ajax({
        type: 'POST',
        url: strUrl,
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        data: JSON.stringify(strData),
        async: false,
        success: onSuccess,
        complete: function(){
            $('.pageloader').hide();
        },
        error: function (err) {
            $(".pageloader").hide();
            swal({
                title: "Something Wents Wrong", text: "", type: "error",
                showCancelButton: false, closeOnConfirm: true, confirmButtonText: "OK",
            }, function (isConfirm) {

            });
            console.log(err);
        }
    });
}

而且我已經將我的loader元素放在了signin.cshtml的開頭

<div class="pageloader">
    <div class="section-loader">
        <div class="loaderNew">
            <div class="loader-imgNew"></div>
        </div>
    </div>
</div>

有人可以幫我找到解決方案嗎？

Answer 1

嘗試在您的html內部append()中使用它，這只是一個示例...

 function blockUI(){ $('body').append('<div class="blockUI-overlay" style="position: fixed;width: 100%;height: 100vh;top: 0;background: rgba(0, 0, 0, 0.34);cursor: progress;"></div>'); } function removeblockUI(){ $('.blockUI-overlay').remove(); } //Call anywhere in your file with ajax request $(document).on('click','.yourClassname',function(){ blockUI(); $.ajax({ url:'yourURL', type:'post', success:function(data){ alert('hye'); removeblockUI(); }, error:function(){ alert("Bye"); removeblockUI(); }, }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="" class="yourClassname">abc</a> 

Answer 2

雖然我不確定您在這里做什么，但也許可以嘗試使div隱藏（hidden =“ hidden”），然后在首次調用該函數時進行顯示。

$(".pageloader").show();

這樣，當第一次執行該方法時，它將顯示div，然后在完成時將其隱藏...

Answer 3

如果在.css文件中顯示“ .pageloader”，則只需在“ display：none”中顯示它，之后，用戶單擊登錄按鈕就可以通過調用“ $（'。pageloader'）。show（）;”來顯示。 ，這是下面的代碼：

_signin.SignIn = function () {
            $('.pageloader').show();
            var obj = {};
            obj.user_name = $("#email").val();
            obj.password = $("#password").val();
            CallSignIn(user, 'signin', obj, _signin.onsuccesssignin, '');
    };

Answer 4

您可以使用$.ajax beforeSend函數

$.ajax({
    type: 'POST',
    url: strUrl,
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    data: JSON.stringify(strData),
    async: false,
    beforeSend: function(){
      $('.pageloader').show();   // here it is
    }
    success: onSuccess,
    complete: function(){
        $('.pageloader').hide();
    },
    error: function (err) {
        $(".pageloader").hide();
        swal({
            title: "Something Wents Wrong", text: "", type: "error",
            showCancelButton: false, closeOnConfirm: true, confirmButtonText: "OK",
        }, function (isConfirm) {

        });
        console.log(err);
    }
   });

Answer 5

您可以在對象上定義行為，例如：

var wait= (function () {
var waitDiv = $('<div class="modal" id="waitDialog" data-backdrop="static" data-keyboard="false"><div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="wait"></div></div></div></div>');
return {
    showWait: function() {
        waitDiv.modal();
    },
    hideWait: function () {
        waitDiv.modal('hide');
    },

};

}）（）;

與wait.showWait（）和wait.hideWait（）;一起使用；

jQuery需要，但我認為您已經在使用它了:)

編輯：抱歉，我的示例基於引導程序...