Question

我目前正在一个音乐网站上工作，我使用ajax加载不同的页面和内容，所有都正常工作但我需要显示某种预加载或加载或prease等待ajax获取数据并停止预加载时完成。这是我用来获取我的内容的ajax代码，请任何人帮助我如何实现这一目标。

// handles the click event, sends the query
function getindex_page() {
    $.ajax({
        url:'templete.php',
        complete: function (response) {
            $('#main-container').html(response.responseText);
        },
        error: function () {
            $('#main-container').html('Bummer: there was an error!');
        },
    });
    return false;
}

<ul class="menu-items">
                        <li>
                            <a class="browse" href="/index.php" onclick="return getindex_page();"><i class="arcd-archive" ></i></br>Browse</a>                             
                        </li>
					</ul>
<div id="main-container"> ajax will loads contents here </div>

任何帮助都将非常感激。

Answer 1

您需要将其更改为微调器或其他任何内容，但基本上它非常简单：

// handles the click event, sends the query
function getindex_page() {
   $('#main-container').html('Loading... Please wait');
   // or change this to show a div that covers the page and has a spinner or whatever
   $.ajax({

      url:'templete.php',
    complete: function (response) {
        $('#main-container').html(response.responseText);
    },
    error: function () {
        $('#main-container').html('Bummer: there was an error!');
    },
});
return false; }

主要容器的html将在点击事件发生后立即更改为正在加载......并将在ajax完成时被覆盖。如果你展示了一个微调器，只需将它隐藏在你的完整功能中。

Answer 2

嗨使用＆＃34; beforeSend＆＃34;像这样的功能。然后加载文本只有在ajax调用开始时才可见。

＆＃13;

function getindex_page() {
  var strLoadingText = 'Loading... Please wait';
  
  $.ajax({
    url:'templete.php',
    beforeSend: function () {
      $('#main-container').html(strLoadingText);
    },
    complete: function (response) {
        $('#main-container').html(response.responseText);
    },
    error: function () {
        $('#main-container').html('Bummer: there was an error!');
    },
});
  
  return false; 
}

＆＃13;

如何在我的网站上通过ajax显示加载内容的预加载器

2 个答案: