为什么我的ajax请求从Laravel控制器重复相同的数据？

Posted 2021-03-28

目标：当用户单击“加载更多”按钮时，使用ajax请求将更多行从数据库加载到视图。我希望在不重新加载页面的情况下加载数据。

问题：通过ajax加载的数据会在每个请求上重复相同的行，并且不会按照标准请求进行分页。

Detail：我有一个视图，该视图从数据库中加载4行，并使用内置Laravel's进行分页。我在“加载更多”按钮上添加了一个事件侦听器，该按钮将请求成功发送到pagination，后者又成功返回了数据。 controller返回我要显示的数据的局部视图。但是，此数据似乎不能正确增加，并且会不断重复每个请求上显示的记录。如果问题出在controller或controller中，我不确定在这里缺少什么？

[我对JS，Laravel和php并不十分有经验，因为他来自更多的Web设计师和JS设计背景，并且很想真正了解我在这里做错了什么。

部分视图：

UI

使用Javascript：（我正在更新button href属性，以便请求URL反映正确的查询）

@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

控制器：

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 query string 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')); } } 是通过Here执行此操作的一个很好的示例。由于您使用的是纯jQuery，因此应根据您的需要进行调整。