Question

我无法在我的ajax jQuery调用上调用loader。

我想在我的ajax调用api时显示加载器，并在ajax完成api调用时隐藏。

我有2个JavaScript文件。

1是我在其中调用ajax方法的主要signin.js

_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

在append()内使用html试试这个，这只是一个例子...

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

虽然我不确定你在这里做了什么，但也许会尝试隐藏div（隐藏=“隐藏”），然后在首次调用该函数时进行显示..

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

这种方式首次执行时，它会显示div，然后当它完成时会隐藏它...

Answer 3

如果你是节目＆＃34; .pageloader＆＃39;在.css文件中，只需将其设置为＆＃39;显示：无＆＃39;，之后只需显示用户点击登录按钮通过调用＆＃34; $（＆＃39; .pageloader＆＃39;）。show（）;＆＃34;，这个代码如下：

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

Answer 4

您可以使用beforeSend

的$.ajax功能

$.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需要，但我认为你已经在使用它了:)）

编辑：对不起，我的例子是基于bootstrap ...

如何在使用ajax jquery

5 个答案: