Question

我有一张桌子。当我单击表行时，之后调用ajax请求函数，然后加载多个表。我想在ajax方法运行时显示微调器。所以我编写如下代码。

$(".table-row").click(function (evt) {
   ShowSpinnerFuntion();
   var $cell = $(evt.target).closest('td'), msg;
   var id = $cell.attr("id");
   CallAjaxMethodForTable1(id);
   CallAjaxMethodForTable2(id);
   CallAjaxMethodForTable3(id);
   CallAjaxMethodForTable4(id);
});

当我执行此单击函数时，在使用ajax请求加载所有表之后显示微调器。即ajax方法在“ShowSpinnerFuntion（）”方法之前运行，尽管我首先调用method（show spinner）。

我在这个click函数方法中只编写了show spinner函数。如：

$(".table-row").click(function (evt) {
   ShowSpinnerFuntion();
   var $cell = $(evt.target).closest('td'), msg;
   var id = $cell.attr("id");
   //CallAjaxMethodForTable1(id);
   //CallAjaxMethodForTable2(id);
   //CallAjaxMethodForTable3(id);
   //CallAjaxMethodForTable4(id);
});

当我执行如上所述的点击功能时，直接显示该微调器。如何在ajax请求函数之前执行微调器函数。我怎样才能优先考虑这个javascript函数。

Answer 1

只需在行单击功能中调用所需的ajax函数

$(".table-row").click(function (evt) {
   var $cell = $(evt.target).closest('td'), msg;
   var id = $cell.attr("id");
   CallAjaxMethodForTable1(id);
   CallAjaxMethodForTable2(id);
   CallAjaxMethodForTable3(id);
   CallAjaxMethodForTable4(id);
});

然后定义如下功能。在开始时显示加载器并在成功或错误时隐藏加载器。

function CallAjaxMethodForTable1(){
$('.loaderImage').show();
$.ajax({
        type: "POST",
        url: "/some_url",
        data: { id: id },                        
        success: function(data){                
            $('.loaderImage').hide();
        },
        error: function (response) {
           $(".loaderImage").hide();

       }           
    });
}

Answer 2

我希望它的工作

$(".table-row").click(function (evt) {
$('.loaderImage').show();
   var $cell = $(evt.target).closest('td'), msg;
   var id = $cell.attr("id");
   CallAjaxMethodForTable1(id);
   CallAjaxMethodForTable2(id);
   CallAjaxMethodForTable3(id);
   CallAjaxMethodForTable4(id);
});



function CallAjaxMethodForTable4(){
$.ajax({
        type: "POST",
        url: "/some_url",
        data: { id: id },                        
        success: function(data){                
            $('.loaderImage').hide();
        },
        error: function (response) {
           $(".loaderImage").hide();

       }           
    });
}

并在每个方法中提及此代码

 error: function (response) {
               $(".loaderImage").hide();

           }

Answer 3

一种好的方法是通过jQuery的全局ajax事件处理程序.ajaxStart()和.ajaxStop()。

.ajaxStart（）-   注册第一个Ajax请求开始时要调用的处理程序。

.ajaxStop（）-   注册所有Ajax请求完成后要调用的处理程序。

因此，在您的情况下，您可以在.ajaxStart()上显示微调框，并在.ajaxStop()上隐藏它，而不必担心在单击表格时显示/隐藏它。这将在全局范围内处理，也将适用于其他请求，这是异步加载数据时的一个好习惯。

检查代码段以获取有效的演示：

$(document).ready(function() {
  //when ajax request is started
  $(document).ajaxStart(function(event, jqXHR) {
    $(".loader").show();
  });

  //when all ajax requests are completed
  $(document).ajaxStop(function(event, jqXHR) {
    $(".loader").hide();
  });

  $("#makeRequest").on("click", function() {
    $.ajax({
      method: "GET",
      url: "https://jsonplaceholder.typicode.com/comments"
    });
  });
});

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}

.loader {
  display: none;
  color: #ffffff;
  font-size: 11px;
  text-indent: -99999em;
  margin: 55px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.loader:before,
.loader:after {
  position: absolute;
  content: '';
}

.loader:before {
  width: 5.2em;
  height: 10.2em;
  background: #0dc5c1;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.2em 5.1em;
  transform-origin: 5.2em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
}

.loader:after {
  width: 5.2em;
  height: 10.2em;
  background: #0dc5c1;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 5.1em;
  -webkit-transform-origin: 0px 5.1em;
  transform-origin: 0px 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
}

@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="makeRequest">Make a request</button>
<div class="loader">Loading...</div>

Teble Row单击时显示微调器

3 个答案: