获取整个数据时如何停止在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);
    }
});

});