ジャンゴ - 私はフロントエンドが苦手だと私はAjaxを使って非常に困惑しているロード・ページは、私が本当に助けを必要と

Question

..

を動作していないため、AJAX呼び出し。

テーブルのボタンをクリックしたときにAjaxコールを実行しようとしています。そのボタンを押すと、私のアニメーション.gifが表示され、ページがロードされていることがわかります。

私のテンプレート：基本的に私は私の.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> 

....

Answer 1

var $loading = $('.ajaxProgress').hide(); 
$(document) 
.ajaxStart(function() { 
    $loading.show(); 
}) 
.ajaxStop(function() { 
    $loading.hide(); 
}); 

私はこの方法を使用したいです