Javascript 如何在Ajax调用中添加UI微调器？_Javascript_Spinner_Jquery Ui Spinner

Javascript 如何在Ajax调用中添加UI微调器？

javascript

Javascript 如何在Ajax调用中添加UI微调器？,javascript,spinner,jquery-ui-spinner,Javascript,Spinner,Jquery Ui Spinner,我想展示如何在Ajax调用中加载微调器。我尝试了spin.jslibrary，但没有成功。这是我的JavaScript函数，它使用Ajax调用 function sendRequest() { $.ajax({ url: '/spinner', type: 'get', contentType: "application/json", success: function (resp) {

我想展示如何在Ajax调用中加载微调器。我尝试了

spin.js

library，但没有成功。这是我的JavaScript函数，它使用Ajax调用

function sendRequest() {
    $.ajax({
            url: '/spinner',
            type: 'get',
            contentType: "application/json",
            success: function (resp) {
                $('#spinner').append(resp.data);
                console.log(resp.data);
            },
            error: function (){
                console.log("Oops!");
            }
        }
    );
}

我的HTML代码：

<html>
<head>
    <link type="text/css" rel="stylesheet" href="../resources/css/style.css"/>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
    <script type="text/javascript" charset="utf-8" src="../resources/js/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="../resources/js/send.js"></script>
    <script type="text/javascript" charset="utf-8" src="../resources/js/jquery.spin.js"></script>
    <script type="text/javascript" charset="utf-8" src="../resources/js/spin.js"></script>
</head>
<body>
    <button id="butt" class="pure-button pure-button-primary" onclick="sendRequest()">Press me!</button>
    <div id="spinner">Greeting!</div>
</body>
</html>

在服务器端，我有一点延迟（5秒）。实际上，我想在这5秒钟内展示spinner。如何将动画微调器添加到页面中？

您不需要任何库来完成此操作。只需将图像添加到标记中，在默认情况下将其隐藏，在发送请求时显示图像，在请求完成时隐藏图像

JavaScript

 function sendRequest() {
      // show spinner
      $('#spinner').show();
      $.ajax({
          url: '/spinner',
          type: 'get',
          contentType: "application/json",
          success: function (resp) {
              $('#spinner').append(resp.data);
              console.log(resp.data);
          },
          error: function () {
              console.log("Oops!");
          }
      }).done(function () {
          // hide spinner
          $('#spinner').hide();
      });
  }

HTML

我应该使用z-index吗？@barbara是的，如果有任何z-index更高的内容，请在标记中添加另一个带有

id=“fade”

的div，默认情况下将其隐藏，将其位置设置为绝对，100%宽度和高度，将其背景设置为黑色，将其不透明度设置为0.5，正好在

$（“#微调器”）之前。show（）

添加

$（“#fade”）.fadeIn（）

并隐藏它，

$（“#fade”）.fadeOut（）

现在我的

问候语不想隐藏。当我淡入时，div=微调器不会隐藏到背景中。它仍然不在前台。@芭芭拉把你的代码放在小提琴上分享，这样我就可以看出哪里出了问题
 function sendRequest() {
      // show spinner
      $('#spinner').show();
      $.ajax({
          url: '/spinner',
          type: 'get',
          contentType: "application/json",
          success: function (resp) {
              $('#spinner').append(resp.data);
              console.log(resp.data);
          },
          error: function () {
              console.log("Oops!");
          }
      }).done(function () {
          // hide spinner
          $('#spinner').hide();
      });
  }

<img src="path/to/img.png" id="spinner"/>

#spinner{
  display: none;
  position: absolute;
  left: 50%;
  top: 20%;
}