Question

我试图在发送ajax请求之前显示微调器和叠加层。但是onclick事件直接发送ajax请求，而不显示覆盖和微调框。谁能指出我做错了什么！这是我的代码

$(document).ready(function() {
    $(".refreshBtn").on('click', function() {
        $("#overlay").css('display', 'block');
        $(".spinner").css('display', 'block');

        TableDataContent();
    });

    function TableDataContent() {
        $(".all_tab_content").html('');

        var tableDiv = '<div id="Leaderboard" class="tabcontent"><table class="table-striped"><tbody></tbody></table></div>';

        $(".all_tab_content").append(tableDiv);
        var tableBody = $('#Leaderboard tbody');

        $.ajax({
            type: 'get',
            url: 'https://sheets.googleapis.com/v4/spreadsheets/{SHEET_ID}/values/Leaderboard?key={API_KEY}',
            async: false,
            success: function(response) {

            }
        });

        $("#overlay").css('display', 'none');
        $(".spinner").css('display', 'none');
    }
});

Answer 1

您的微调器没有显示，因为AJAX请求是异步的。这意味着它将在脚本也继续执行的同时被执行。

要解决此问题，请在AJAX的success回调中移动隐藏叠加层和微调器的指令。

Answer 2

现在，您正在隐藏.spinner和#overlay，而无需等待ajax完成。 Ajax的{{1}}回调在接收到数据时发生，这正是您想隐藏success并休息的时刻。

.spinner

Answer 3

在ajax完成之前，您正在隐藏微调框，将它们从complete回调中隐藏起来，这样即使ajax失败，它们也可以被隐藏。

$.ajax({
type: 'get',
url: 'https://sheets.googleapis.com/v4/spreadsheets/{SHEET_ID}/values/Leaderboard?key={API_KEY}',
async: false,
success: function(response) {

},
complete: function(xhr, textStatus){
    $("#overlay").css('display', 'none');
    $(".spinner").css('display', 'none');
}
});

Answer 4

问题完全是由于您使用了async: false。这是非常糟糕的做法，因为它会阻止在请求进行过程中更新浏览器。因此，您永远不会看到界面更改。

要解决此问题，请删除async: false，然后使用$.ajax()的异步回调，如下所示：

$(function() {
  $(".refreshBtn").on('click', function() {
    TableDataContent();
  });

  function TableDataContent() {
    var $indicators = $("#overlay, .spinner").show(); // show the loading indicator when the request starts...

    var tableDiv = '<div id="Leaderboard" class="tabcontent"><table class="table-striped"><tbody></tbody></table></div>';
    $(".all_tab_content").empty().append(tableDiv);

    var $tableBody = $('#Leaderboard tbody');

    $.ajax({
      type: 'get',
      url: 'https://sheets.googleapis.com/v4/spreadsheets/{SHEET_ID}/values/Leaderboard?key={API_KEY}',
      success: function(response) {
        // work with the response here...
      },
      complete: function() {
        $indicators.hide(); // hide the loading indicator when the request ends
      }
    });
  }
});

请注意此处使用empty()，show()和hide()。

您还假设需要将URL中的{SHEET_ID}和{API_KEY}更改为它们的实际值-假定这不仅是问题中的修订数据。

onclick不会触发jquery中的所有代码

4 个答案: