Ajax Загрузить больше контента

Question

Я хочу загрузить контент из /page-0.html?to-page=2 и моя текущая страница /page-0.html?to-page=1.

Вот мой код:

    $(document).ready(function() {

    var page = 1;

    $.get('/page-0.html?to-page=' +page, function(html) {
    if(html) {

    $('#result').append(html);
    $('#more').text('Load More Post'); //add text "Load More Post" to button again
        } else {
            $('#more').text('No more Post to load'); // when last record add text "No more posts to load" to button.
        }
    $('#more').click(function() {
    $('#more').html('<img src="ajax-loader.gif"');
    page += 1;
    });
    }, 'json');

    });

HTML:

    <div id="result"></div> <button id="more">Load more</button>

Если я нажму кнопку «загрузить больше», это должно изменить URL /page-0.html?to-page=1 to 2. Возможно ли это?

Я новичок в jquery. Может ли кто-нибудь помочь мне найти мою ошибку здесь?

Answer 1

Попробуйте это:

$(document).ready(function() {

    var page = 1;
    var getData;
    (getData = function() {
        $.get('/page-0.html?to-page=' +page, function(html) {
            if(html) {

                $('#result').append(html);
                $('#more').text('Load More Post'); //add text "Load More Post" to button again
            } else {
                $('#more').text('No more Post to load'); // when last record add text "No more posts to load" to button.
            }
        }, 'json');
    })();
    $('#more').click(function() {
        $('#more').html('<img src="ajax-loader.gif"');
        page += 1;
        getData();
    });
});

Я использовал функцию getData в качестве IIFE , чтобы запрос автоматически выполнялся в первый раз, а затем вызывал ту же функцию при нажатии кнопки more. НТН