为什么我的 Ajax 请求在 Laravel 中无法进行无限滚动分页？

问题描述

我正在尝试在 laravel 上使用 window.scroll() 方法执行无限滚动分页。每当到达页的底部 -

1. loadMoreData(page) 被调用。
2. beforeSend:function() 成功执行。
3. .fail() 从 $.ajax() 调用并警告“服务器没有响应”。

以下是我来自 3 个不同文件的 Laravel 和 ajax 代码 - index.blade、data.blade(Views/data)、PostController.PHP

INDEX.BLADE

@extends('layouts.app')
@section('content')

`<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">`

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"integrity="sha2569/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script>

<div class="container">



<div class="col-md-12" id="post-data">
    @include('data')
  </div>

  <div class="ajax-load text-center" style ="display:none">
    <p><img src="/storage/Rand_Img/insta-DataLoader.gif">Loading More Post... </p>
  </div>

</div>

<script>

$(document).ready(function(){


  function loadMoreData(page){
     $.ajax({
       url:'?page='+ page,type:'get',beforeSend:function(){
         $(".ajax-load").show();
       }
     }).done(function(data){
       if(data.html == " "){
         $('.ajax-load').html("No more data");
       }
       $('.ajax-load').hide();
       $("#post-data").append(data.html);
     }).fail(function(jqXHR,ajaxOptions,thrownError){
       alert('Server not responding!');
console.log("textStatus: "+textStatus+"\n ajaxOPtions: "+ajaxOptions+"\n jqXHR: "+jqXHR);
     });
   }


$(window).scroll(function(){
  var page = 1;
if($(window).scrollTop() + $(window).height() >= $(document).height() ){
 page++;
 loadMoreData(page);
}
  });


});

</script>

@endsection
    
   

数据.BLADE

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>


 @foreach ($post as $show)

  <div class="row">

     <div class="col-6 offset-1">
        <div class="">
          <div class="d-flex align-items-center">
            <div class="pr-4">
              <img src="{{$show->user->Profile->profileImage() }}"
               alt="{{$show->image}}" style="width:70px;" class="rounded-circle">
            </div>
           <a href="/profile/{{$show->user->id}}/index" style=" font-size:20px;">
             {{$show->user->username}}</a>
             <a href="#" style=" font-size:20px;" class="pl-4">Follow</a>
          </div>

          <div class="">
          <p style="font-size:20px;" class="p-4">{{$show->caption}}</p>
          </div>
        </div>
     </div>
  </div>
  <div class="row pb-5 ">
    <div class="col-6 offset-3">
    <a href="/profile/{{$show->user->id}}/index">
      <img src="/storage/{{$show->image}}" alt="{{$show->image}}"class="w-100"></a>
    </div>
  </div>

@endforeach

PostController.PHP

 $user_id = auth()->user()->following()->pluck('profiles.user_id');

 $post = Post::whereIn('user_id',$user_id)->orderBy('created_at','DESC')->Paginate(3);


 if(($request->ajax())){
   $view  = view('data',compact('post'))->render();
   return response()->json(['html'=>$view]);

 }
   return view('Post/index',compact('post'));

这是我从“网络”标签中得到的...

回复：

解决方法

您能否尝试将完整的 URL 放入您的 ajax 调用方法中？ 我相信没有像您那样指定完整的 URL url:'?page='+ page，jQuery 将使用当前浏览器页面 URL 作为基本 URL。所以类似于url:'https://example.com?page='+ page。

编辑： 当请求是 Ajax response()->json(['html'=>$view]); 时，您的控制器似乎返回。什么是 $view 对象，为什么要返回它？您应该只将 $post 变量作为 JSON 返回，并从请求 URL 参数中检索页码（在脚本中硬编码为 3）。