为什么我的 Ajax 请求在 laravel 中无限滚动分页失败？

Question

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

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

下面是我的 laravel 和 ajax 代码，来自 3 个不同的文件 - 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
    
   

Data.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'));

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

回应：

Answer 1

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

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