Использование Ajax для загрузки большего количества сообщений |Помогите мне изменить формулировку на моей кнопке, чтобы уведомить пользователя

Question

У меня возникла небольшая ситуация, когда я пытался перенести стиль кода, который я использовал на предыдущем веб-сайте, где я изменил бы формулировку на кнопке, которую пользователь нажимает, чтобы загрузить больше. Я создал рабочий пример для кнопки фильтра, но, похоже, не вижу, как я могу применить это к своей кнопке «Загрузить больше».

В настоящее время пользователь нажимает кнопку «Загрузить больше», подождите 5 секунд, а затем новый контент. добавится к старому.

Я хочу, чтобы они нажимали на кнопку «Загрузить больше», формулировка изменится на загрузку, затем, когда содержимое загрузится, формулировка вернется, чтобы загрузить больше.

ВотНапример, у меня работает (не изменяйте этот код) на некоторых фильтрах ...

jQuery(function(n) {
    n("#advanced-filterform").submit(function() {
        var e = n("#advanced-filterform");
        return n.ajax({
            url: e.attr("action"),
            data: e.serialize(),
            type: e.attr("method"),
            beforeSend: function(t) {
                e.find("button").text("Applying Filters...")
            },
            success: function(t) {
                e.find("button").text("Apply filters"), n("#response").html(t)
            }
        }), !1
    })
})

Я хочу использовать технику, аналогичную этому блоку кода (отредактируйте этот блок кода) :

var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;
jQuery(function($) {
    $('#load-more').click(function() {
        var data = {
            'action': 'load_posts_by_ajax',
            'page': page,
            'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
        };

        $.post(ajaxurl, data, function(response) {
            if(response != '') {
                $('.testimonials').append(response);
                page++;
            } else {
                $('.load-more-posts').hide();
            }
        });
    });
});

Наконец, вот кнопка, которую я хочу изменить в тексте:

<div class="load-more-posts">
    <a id="load-more" class="box-link"></a>
    <h6 class="load-more-text"><?php echo $read_more_button_text; ?></h6>
</div>

Я довольно новичок в чудесах Ajaxпоэтому буду признателен за любые комментарии, которые вы можете предоставить, пока отвечаете!

Большое спасибо всем, Джейсон.