jQuery

Question

我有以下 select 菜单：

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

当我 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);
            });

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

Answer 1

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

Answer 2

假设您的加载 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<

Answer 3

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

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);
});

jQuery - 从下拉菜单中更改选项时显示加载符号

jQuery - Show loading symbol when changing option from dropdown

javascript

ajax

load