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

2022-04-01 00:00:00 spinner javascript jquery-ui-spinner

我想展示如何在AJAX调用中加载微调函数。我尝试了spin.js库，但不起作用。下面是我的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>

-css-

#spinner {
    text-align: center;
    font-size: 100px;
    color: #FFFFFF;
    margin: 25px 350px 350px 350px;
    background: #ad9ea4;
    position: relative;
    padding: 50px;
}

在服务器端，我有一点延迟(5秒)。实际上，我想展示一下这5秒的旋转效果。如何将动画微调控件添加到我的页面中？

解决方案

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

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

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

css(您可能需要编辑此内容)

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

相关文章