Ajax loads entire page instead of specific element?

Question

1C-Bitrix

There is a "Show more" button on the page . When you click on it, the products from the next pagination page should be displayed.
As a result, the entire content of the page is loaded onto the page.

Request code:

$(document).on('click', '[data-show-more]', function(){
    var btn = $(this);
    var page = btn.attr('data-next-page');
    var id = btn.attr('data-show-more');
    var bx_ajax_id = btn.attr('data-ajax-id');
    var block_id = "#comp_"+bx_ajax_id;

    var data = {
        bxajaxid:bx_ajax_id,
        infinity:1
    };
    data['PAGEN_'+id] = page;

    $.ajax({
            type: "POST",
            url: window.location.href,
            data: data,
            timeout: 3000,
            success: function(data) {
                    $("#btn_"+bx_ajax_id).remove();
            $('[data-products]').append(data);
            $('body').animate({ "scrollTop" : $('[data-index='+(page-1)+']').offset().top +280 }, 'slow');

            }
    });

Button code:

<div class="ajax-nav" id="btn_<?=$bxajaxid?>">
      <a data-ajax-id="<?=$bxajaxid?>" href="javascript:void(0)" data-show-more="<?=$arResult["NAV_RESULT"]->NavNum?>" data-next-page="<?=($arResult["NAV_RESULT"]->NavPageNomer + 1)?>" data-max-page="<?=$arResult["NAV_RESULT"]->nEndPage?>">Показать еще</a>
  </div>

Answer 1

And do you check on the server side the type of request (ajax or regular request)? If an ajax request comes in, then you reset the buffer before displaying the necessary content.

Answer 2

You need to check in the handler code that AJAX is going on:

if(isset($_POST['infinity'])) {
 echo ... 
// Run AJAX
} else { echo ...};