javascript - 在填充 div 之前插入加载文本消息？

Question

我在下面调整我的功能时遇到了问题。我希望在 #project-container 填充 HTML 之前插入加载文本消息，并在插入 response 后消失。

但是，如果我插入:

$('#project-container').html("我的文字在这里");

...就在之前:

$('#project-container').html(response);

然后，response 不会显示，因为 div 已经填充了“my text here”。我可以使用其他方法吗？

    function projectShow() {
        $.ajax({
            type: 'POST',
            cache: false,
            url: ajaxURL,
            data: {'action': 'load-content', post_id: post_id },
            success: function(response) {
                $('#project-wrapper').addClass('activated');
                $('#project-container').html(response);         <---I want it inserted
                $('.post-container').addClass('fadeInUp');          before this line.
                $('.close-button').addClass('fadeOutDown');
                $('#project-wrapper .entry-title').shuffleLetters();
            return false;
            }
        });
    }

Answer 1

如果您需要“正在加载”消息，请在 beforeSend 事件时显示它，并在 success 时隐藏它:

function projectShow() {
    $.ajax({
        type: 'POST',
        cache: false,
        url: ajaxURL,
        data: {'action': 'load-content', post_id: post_id },
        beforeSend: function() { $('#project-container').html("Loading, Please wait"); },
        success: function(response) {
            $('#project-wrapper').addClass('activated');
            $('#project-container').html(response);
            $('.post-container').addClass('fadeInUp');
            $('.close-button').addClass('fadeOutDown');
            $('#project-wrapper .entry-title').shuffleLetters();
        return false;
        }
    });
}

参见 Ajax Events