如何在AJAX调用中添加UI微调器？ [英] How can I add UI spinner on Ajax call?
本文介绍了如何在AJAX调用中添加UI微调器？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想展示如何在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%;
}
这篇关于如何在AJAX调用中添加UI微调器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
