Question

我在页面上的ajax调用之前先调用加载程序，如下所示

    $('#firstbutton').click(function() {
      $('body').addClass('loading');
      $.ajax({
        method: "POST",
        url: "somepage.htm",
        async: false,
        success: function() {
          //some code
          $('body').removeClass('loading');
        },
        error: function(error) {
           //error handling
        }
      });
    });

    $('#secondbutton').click(function() {
      $('body').addClass('loading');
      $.ajax({
        method: "POST",
        url: "somepage2.htm",
        async: false,
        success: function() {
          //some code
          $('body').removeClass('loading');
        },
        error: function(error) {
           //error handling
        }
      });
    });

所有这些都在单独的js文件中。当我单击第一个按钮（#button）时，一旦调用完成并显示结果，加载器就会显示并隐藏，但是当我单击第二个按钮（#anotherbutton）时，加载器不会显示，但结果会得到一段时间后显示。同样，这组代码在Firefox中也可以正常工作。我是ajax的新手，所以调试起来很困难。任何帮助表示赞赏。

伴随HTML

<div class="tab-slider-nav">
    <ul class="tab-slider-tabs">
        <li class="tab-slider-trigger active>tab with #button</li>
        <li class="tab-slider-trigger">tab with #anotherbutton</li>
    </ul>
</div>
<div class="tab-container">
    <div id="tab1" class="tab-body">
        <p>Tab with #firstbutton</p>
        <input type="text">
        <div class="button">
           <a id="firstbutton" class="btn">transfer</a>
        </div>
     </div>
     <div id="tab2" class="tab-body">
        <p>Tab with #secondbutton</p>
        <input type="text">
        <div class="button">
           <a id="secondbutton" class="btn">transfer</a>
        </div>
     </div>
</div>
<div class="loadingModal">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</div>

Loader CSS

    .loadingModal {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba( 255, 255, 255, .8);
    }

    .loadingModal ul {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
        display: flex;
    }

    .loadingModal ul li {
        list-style: none;
        width: 15px;
        height: 15px;
        background: #1c1d4c;
        margin: 0 5px;
        border-radius: 50px;
        -webkit-animation: animate 1.4s linear infinite;
        -moz-animation: animate 1.4s linear infinite;
        -ms-animation: animate 1.4s linear infinite;
        -o-animation: animate 1.4s linear infinite; 
        animation: animate 1.4s linear infinite;
    }

    @keyframes animate {
        0% {
           transform: translateY(0);
        }
        60% {
           transform: translateY(0);
        }
        80% {
           transform: translateY(-40px);
        }
        100% {
           transform: translateY(0);
        }
    }

    .loadingModal ul li:nth-child(1) {
        animation-delay: 0s;
    }

    .loadingModal ul li:nth-child(2) {
        animation-delay: -1.2s;
    }

    .loadingModal ul li:nth-child(3) {
       animation-delay: -1s;
    }

    .loadingModal ul li:nth-child(4) {
       animation-delay: -.8s;
    }

    .loadingModal ul li:nth-child(5) {
         animation-delay: -.6s;
    }

    body.loading .loadingModal {
        overflow: hidden;
        display: block;
    }

Answer 1

您只需尝试

1）

$array2 = array(
    array("order"=>2222,"d"=>3333,"b"=>123456),
    array("order"=>1111,"d"=>44444,"b"=>223332)
);

2）

在ajax调用中添加“ .complete”状态，并从成功中删除removeClass代码，并添加到“ .complete”状态

Answer 2

根据OP的编辑更新了答案。更新后需要进行多种修复： 1）Anchor标记具有其自身的作用，因此，与其关联的任何单独的事件处理程序都需要preventDefault()才能起作用。 2）不建议使用false异步，因此您必须从代码中删除它。

 $('#firstbutton').click(function(e) {
      e.preventDefault();
      $('body').addClass('loading');
      $.ajax({
      method: "GET",
        url: "https://jsonplaceholder.typicode.com/todos/1",
        success: function() {
          //some code
          $('body').removeClass('loading');
        },
        error: function(error) {
           //error handling
        }
      });
    });

    $('#secondbutton').click(function(e) {
     e.preventDefault();
      $('body').addClass('loading');
      $.ajax({
        method: "GET",
        url: "https://jsonplaceholder.typicode.com/todos/1",
        success: function() {
          //some code
          $('body').removeClass('loading');
        },
        error: function(error) {
           //error handling
        }
      });
    });

.loadingModal {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba( 255, 255, 255, .8);
    }

    .loadingModal ul {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
        display: flex;
    }

    .loadingModal ul li {
        list-style: none;
        width: 15px;
        height: 15px;
        background: #1c1d4c;
        margin: 0 5px;
        border-radius: 50px;
        -webkit-animation: animate 1.4s linear infinite;
        -moz-animation: animate 1.4s linear infinite;
        -ms-animation: animate 1.4s linear infinite;
        -o-animation: animate 1.4s linear infinite; 
        animation: animate 1.4s linear infinite;
    }

    @keyframes animate {
        0% {
           transform: translateY(0);
        }
        60% {
           transform: translateY(0);
        }
        80% {
           transform: translateY(-40px);
        }
        100% {
           transform: translateY(0);
        }
    }

    .loadingModal ul li:nth-child(1) {
        animation-delay: 0s;
    }

    .loadingModal ul li:nth-child(2) {
        animation-delay: -1.2s;
    }

    .loadingModal ul li:nth-child(3) {
       animation-delay: -1s;
    }

    .loadingModal ul li:nth-child(4) {
       animation-delay: -.8s;
    }

    .loadingModal ul li:nth-child(5) {
         animation-delay: -.6s;
    }

    body.loading .loadingModal {
        overflow: hidden;
        display: block;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="tab-slider-nav">
    <ul class="tab-slider-tabs">
        <li class="tab-slider-trigger active">tab with #button</li>
        <li class="tab-slider-trigger">tab with #anotherbutton</li>
    </ul>
</div>
<div class="tab-container">
    <div id="tab1" class="tab-body">
        <p>Tab with #firstbutton</p>
        <input type="text">
        <div class="button">
           <a id="firstbutton" class="btn">transfer</a>
        </div>
     </div>
     <div id="tab2" class="tab-body">
        <p>Tab with #secondbutton</p>
        <input type="text">
        <div class="button">
           <a id="secondbutton" class="btn">transfer</a>
        </div>
     </div>
</div>
<div class="loadingModal">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</div>
<div class="loadingModal">loader</div>
</body>

AJAX中的页面加载器在同一页面上的行为有所不同

2 个答案: