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

Question

我有以下选择菜单:

<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 调用完成，我该怎么做？

Answer 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<