jQuery - 从下拉列表更改选项时显示加载符号答案

【问题标题】：jQuery - Show loading symbol when changing option from dropdownjQuery - 从下拉列表更改选项时显示加载符号
【发布时间】：2016-08-09 12:03:51
【问题描述】：

我有以下选择菜单：

<select name="period" id="stats-period">
        <option value="all">All time</option>
        <option value="360">12 months</option>
        <option value="270">9 months</option>
        <option value="180">6 months</option>
        <option value="90">3 months</option>
        <option selected="selected" value="30">30 days</option>
        <option value="7">7 days</option>
    </select>

当我从下拉列表中选择一个选项时，我会调用 ajax 以从数据库中获取正确的记录，所以这是我的脚本：

function timePeriod(changePeriod) {

                var url = '<?= admin_url('reports/change_period') ?>';

                $.post(url, {period: changePeriod}, function (response) {

                    var json = $.parseJSON(response);

                    if (json.error == true) {
                        $('#reports').hide();
                        $('#no-reports').show();
                    } 
                    else {
                        $('#reports').show();
                        $('#no-reports').hide();

                        $('#numprojects').text(json.projects);
                        $('#average-cost').text(json.average_cost.toFixed(2));
                        $('#over-budget').text(json.over_budget);
                        $('#average-client-flags').text(json.average_client_flags);
                        $('#average-delayed').text(json.average_delayed.toFixed(1));
                    }
                });
            }

            $('#stats-period').on('change', function(){
                var selected = $(this).val();
                timePeriod(selected);
            });

我不想做的是在更改下拉列表的选定值时显示加载符号，直到ajax调用完成，我该怎么做？

【问题讨论】：

当用户激活你的下拉菜单时显示符号，并在 Ajax 回调中隐藏它？

标签： javascript jquery ajax load

【解决方案1】：

假设您的加载 gif 位于 ID = #myDiv 的 div 中

function timePeriod(changePeriod) {

    var url = '<?= admin_url('reports/change_period') ?>';

    $('#myDiv').show();

    $.post(url, {period: changePeriod}, function (response) {

        $('#myDiv').hide();

        var json = $.parseJSON(response);

        >SNIP<

【讨论】：

如何将它设置在要显示数据的div之上？我可以用 jquery 来做，还是使用普通的 css？？
纯 CSS。这是几件事：（1）position:absolute，因此您可以使用top:88px 和left:88px 定位DIV，以及（2）z-index:99 将该div 放置在其他元素的顶部（注意：这些示例中使用的数字是示例 - 使数字适当）

【解决方案2】：

在将执行 Ajax 调用的函数的开头显示加载符号。并删除 Ajax 调用的 success: 内的加载符号。

【讨论】：

【解决方案3】：

如果加载元素尚不存在，您可以创建它，显示相对于您的选择选项的位置。一旦你从服务器得到响应，你就可以隐藏它：

function timePeriod(changePeriod) {
    var url = '<?= admin_url('reports/change_period') ?>';
    if ($('#loading').length == 0) {
        loading = $('<img src="loading.gif" alt="" id="loading" />')
        $('body').append(loading)
        loading.hide();
    } else {
        loading = $('#loading');
    }
    loading.position({
      my: "left top",
      at: "right top",
      of: "#stats-period"
    }).show();
    $.post(url, {period: changePeriod}, function (response) {
        loading.hide();

        var json = $.parseJSON(response);
        if (json.error == true) {
            $('#reports').hide();
            $('#no-reports').show();
        } 
        else {
            $('#reports').show();
            $('#no-reports').hide();

            $('#numprojects').text(json.projects);
            $('#average-cost').text(json.average_cost.toFixed(2));
            $('#over-budget').text(json.over_budget);
            $('#average-client-flags').text(json.average_client_flags);
            $('#average-delayed').text(json.average_delayed.toFixed(1));
        }
    });
}

$('#stats-period').on('change', function(){
    var selected = $(this).val();
    timePeriod(selected);
});

【讨论】：