как остановить выборку данных в ajax при получении целых данных

Question

Я получаю данные из БД, используя ajax при прокрутке окна. Каждый раз, когда я прокручиваю окно, оно вызывает ajax и загружает данные снова и снова. например, в базе данных есть 5 строк, и я выбираю 2 строки в каждом вызове, поэтому он должен прекратить выборку строк после выборки 5 строк, но при этом происходит непрерывная выборка строк и дублирование. Поэтому я хочу помочь, как остановить этот вызов, когда 5 строк извлекаются.

Код jQuery

$(document).ready(function(){
    var _token = $('input[name="_token"]').val();
    load_data('', _token);
    function load_data(id="", _token) {
        $.ajax({
            url:"{{ route('loadmore.load_data') }}",
            method:"POST",
            data:{
                id:id, 
                _token:_token
            },
            success:function(data) {
                $('#load_more_button').remove();
                $('#post_data').append(data);
            }
        });
    }

    $(window).scroll(function() {
        if($(window).scrollTop() == $(document).height() - $(window).height()) {

            // ajax call get data from server and append to the div
            var id = $(this).data('id');
            $('#load_more_button').html('<b>Loading...</b>');
            load_data(id, _token);
        }
    });
}); 

Контроллер

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class LoadMoreController extends Controller
{
    function index()
    {
        return view('load_more');
    }

    function load_data(Request $request)
    {
        if($request->ajax()) {

            if($request->id > 0) {

                $data = DB::table('ajaxpracticetable')
                            ->where('id', '<', $request->id)
                            ->orderBy('id', 'DESC')
                            ->limit(3)
                            ->get();
            } else {
                $data = DB::table('ajaxpracticetable')
                            ->orderBy('id', 'DESC')
                            ->limit(3)
                            ->get();
            }
            $output = '';
            $last_id = '';

            if(!$data->isEmpty()) {

                foreach($data as $row) {

                    $output .= '
                        <div class="row">
                            <div class="col-md-12">
                                <h3 class="text-info"><b>'.$row->first_name.'</b></h3>
                                <p>'.$row->last_name.'</p>
                                <br />
                                <div class="col-md-6">
                                    <p><b>Published</b></p>
                                </div>
                                <div class="col-md-6" align="right">
                                    <p><b><i>By - abdullah</i></b></p>
                                </div>
                                <br />
                                <hr />
                            </div>
                        </div>
                    ';
                    $last_id = $row->id;
                }
            } else {
                // here I want to write code that will restrict that data to fetch repeatedly 
            }

            echo $output;
        }
    }
}

Answer 1

Вы можете использовать переменную js для хранения количества запросов.

var cnt = 0;
var xhr;
$(document).ready(function(){
var _token = $('input[name="_token"]').val();
load_data('', _token);
function load_data(id="", _token) {
    if(cnt >= 5) {
       xhr.abort();
       $(window).unbind('scroll');
       return false;
    }
    xhr = $.ajax({
        url:"{{ route('loadmore.load_data') }}",
        method:"POST",
        data:{
            id:id, 
            _token:_token
        },
        success:function(data) {
            cnt += 1;
            $('#load_more_button').remove();
            $('#post_data').append(data);
        }
    });
}

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {

        // ajax call get data from server and append to the div
        var id = $(this).data('id');
        $('#load_more_button').html('<b>Loading...</b>');
        load_data(id, _token);
    }
});

});