我需要真正帮助..
我不擅长前端,我对Ajax很困惑。
当我点击我的桌子上的按钮时,我正在尝试进行Ajax调用,所以当我点击该按钮时,我的ajax应该显示我的动画.gif所以用户应该知道页面正在加载。
我的模板:
<style>
.ajaxProgress{
display:none;
text-align: center;
}
</style>
<div id="output">
<div class="ajaxProgress">
<h3>Please wait..</h3>
<img src="{% static 'img/ajax.gif' %}" alt="loading"/>
</div>
</div>
{% for item in qs %}
<tr>
<tbody>
<td
a id="mqtt" class="btn btn-xs btn-info" title="mqtt" href="javascript: startAjax(){% url 'start_mqtt' item.id %}"><span class="fa fa-signal"></span> </a> </td>
</tbody>
</tr>
{% endfor %}
</table>
<script>
function startAjax() {
$('.ajaxProgress').show();
$.ajax({
type: "GET",
dataType:"json",
async: true,
data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
success: function(json){
$('#output').html(json.message);
$('.ajaxProgress').hide();
GetRating(json.message);
}
})
}
</script>
基本上我需要的是当我按下按钮时应该启动我的.gif但没有任何反应......
答案 0 :(得分:0)
var $loading = $('.ajaxProgress').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
我喜欢这样使用