Django - 加载页面的ajax调用不起作用答案

【问题标题】：Django - ajax call for loading page not workingDjango - 加载页面的ajax调用不起作用
【发布时间】：2017-03-08 04:15:19
【问题描述】：

我真的需要帮助..

我不擅长前端，我对 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 但没有任何反应......

【问题讨论】：

标签： javascript jquery ajax django

【解决方案1】：

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

我喜欢这样用

【讨论】：

首先调用 show() 函数检查加载图像的位置。这可能会显示，但您看不到。通过更改 css 确保它位于页面中间。如果很清楚，如果您成功调用 ajax，上述内容将适用于任何 ajax 调用。