Почему мой ajax-запрос повторяет те же данные с контроллера Laravel?

Question

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

Проблема: Данные, загружаемые через ajax, повторяют одни и те же строки при каждом запросе и не разбивают на страницы в соответствии со стандартомrequest.

Detail: У меня есть представление, которое загружает 4 строки из базы данных, которые я разбиваю на страницы, используя Laravel's встроенный pagination. Я добавил прослушиватель событий для кнопки «Загрузить еще», которая успешно отправляет запрос на controller, который, в свою очередь, успешно возвращает данные. controller возвращает частичное представление данных, которые я хочу отобразить. Однако эти данные не увеличиваются должным образом и продолжают повторять записи, отображаемые при каждом запросе. Я не уверен, что мне здесь не хватает, если проблема в controller или в JS?

Я не очень разбираюсь в Laravel, PHP и JS с тех пор, как пришел от большого количества веб-дизайнеров и UI фона дизайна и хотел бы действительно понять, что я делаю здесь неправильно.

ПОЖАЛУЙСТА, НЕ ПРИМЕРЫ JQUERY.

Частичное представление:

@foreach ($products as $product)
    <div style="background-color:pink; width: 200px;">
        <p>{{ $product->title }}</p>
        <img src="/images/product/{{ $product->img }}" alt="{{ $product->title }}" style="width: 50px;">
    </div>
@endforeach

Javascript: (Я обновляю атрибут button href, чтобы URL запроса отражал правильный запрос)

const container = document.querySelector('#sandbox-container');
let button = document.getElementById('load-stuff');
let url = button.getAttribute('href'); // http://127.0.0.1:8000/sandbox?page=2
let pageNum = button.getAttribute('href').substr(35,1);

button.addEventListener('click', (event) => {
    event.preventDefault();
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    // if page loads successfully, replace the number at the end of the url with the incremented page number
    pageNum++;
    newUrl = url.replace(/page=([^d]*)/, `page=${pageNum}`);
    button.setAttribute('href', newUrl);

    xhr.onload = function() {
        if (xhr.status === 200) {  
            container.insertAdjacentHTML('beforeend', xhr.responseText);
        }
        else {
            console.log(`Request failed, this is the response: ${xhr.responseText}`);
        }
    };     
    xhr.send();     
})

Контроллер:

public function sandbox(Request $request)
    {      
        $products = Product::orderBy('title', 'asc')->paginate(4);

        if($request->expectsJson()){
            return view('sandbox-more', compact('products'));
        } else {
            return view('sandbox', compact('products'));
        }  
    }

Answer 1

Рассмотрим этот фрагмент для вашего javascript

const container = document.querySelector('#sandbox-container');
let button = document.getElementById('load-stuff');

button.addEventListener('click', (event) => {
    event.preventDefault();
    const xhr = new XMLHttpRequest();

    let url = button.getAttribute('href');
    let pageNum = button.getAttribute('data-page-number') || 0;

    xhr.open('GET', url, true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    // if page loads successfully, replace the number at the end of the url with the incremented page number
    pageNum++;
    newUrl = url + '?page=' + pageNum;

    xhr.onload = function() {
        if (xhr.status === 200) {  
            container.insertAdjacentHTML('beforeend', xhr.responseText);
            button.setAttribute('data-page-number', pageNum);
        }
        else {
            console.log(`Request failed, this is the response: ${xhr.responseText}`);
        }
    };     
    xhr.send();     
})

Что я сделал здесь, так это чтобы номер страницы был сохранен в выделенном настраиваемом атрибуте «data-page-number». Делать "button.getAttribute ('href'). Substr (35,1)" неэффективно. А затем проверьте номер страницы и увеличьте его при нажатии кнопки. Кроме того, обновляйте атрибут «data-page-number» только после успешного выполнения запроса. Я надеюсь, что это помогает

Answer 2

Вы должны восстанавливать нумерацию страниц каждый раз, когда вы делаете запрос, чтобы получить правильные данные. Здесь - очень хороший пример того, как сделать это через jQuery. Следует просто настроить его в соответствии с вашими потребностями, так как вы используете чистый Javascript.