Javascript 使用ajax jquery时如何显示加载程序

我无法在ajax jQuery调用中调用loader

我想在ajax调用api时显示loader，在ajax完成api调用时隐藏loader

我有两个JavaScript文件

1是main signin.js，我在其中调用了ajax方法

2是CallSignIn方法上面的调用吗

我把loader元素放在了signin.cshtml的开头

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

---

有人能帮我找到一个解决方案吗？

虽然我不太确定您在这里做什么，但可以尝试将div hiddenhidden=hidden设置为hidden，然后在第一次调用函数时显示

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

这样，当方法第一次执行时，它将显示div，然后当它完成时，它将隐藏它

如果在.css文件中显示.pageloader，只需在 “显示：无”，之后，用户单击登录按钮即可显示 通过调用类似$'.pageloader.show；，此代码如下：

您可以使用$.ajax的beforeSend函数

---

您可以定义对象上的行为，如：

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，但我认为您已经在使用它了：

---

编辑：对不起，我的例子是基于引导的…

用你的html内附试试看，这只是一个例子

功能块用户界面{ $'body'。追加； } 函数removeblockUI{ $'.blockUI覆盖'。删除； } //使用ajax请求调用文件中的任意位置 $document.on'click'，'yourClassname'，函数{ 布洛基； $.ajax{ url:'yourURL'， 类型：'post'， 成功：functiondata{ 警惕“hye”； 移除BlockUI； }, 错误：函数{ 再见； 移除BlockUI； }, }; };

---

Ajax有一个beforeSend:function{here}

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

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

$.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);
    }
   });

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

};