Javascript 使用Ajax在Symfony中无限滚动

我想用无限卷轴展示db的产品

这是我的控制器：

    $start=0;
    $limit= 6;

    $query = $repository->createQueryBuilder('classified')
        ->join('classified.statusId','status')
        ->andWhere('status.name=:status')
        ->setParameter('status','active')
        ->setFirstResult($start)
        ->setMaxResults($limit)
        ->getQuery();

      $results = $query->getResult();

    if ($request->isXmlHttpRequest()){

        $list = $this->renderView('search-result.html.twig', [
            'results' => $results
        ]);


    $response = new JsonResponse();
    $response->setData(array('classifiedList' => $list));
    return $response;
}

阿贾克斯：

所以现在发生的是，当滚动被触发时，前6个结果会重复显示。我知道这是不正确的，我不希望它能正常工作。但我不知道下一步是什么。 那么我需要添加paginator还是什么

---

任何帮助都将不胜感激，谢谢

您需要跟踪ajax是否正在请求，这样当窗口达到滚动限制时，它不会多次请求。此外，还需要跟踪偏移以及是否有更多数据要加载。e、 g

 window.__isFetching = false;
 window.__offset = 0;
 window.__hasMoreData = true;

 $(window).scroll(function () {
    if($(window).scrollTop() + $(window).height()>= $(document).height()){

      if(!window.__isFetching && window.__hasMoreData) {
         getmoredata();
      }
    }

 })

 function getmoredata() {
        window.__isFetching = true;
        $.ajax({
            type: "GET",
            // NOTE, you can pass current offset here in url
            url: "{{ path('classified_list', {'type' : 'all', }) }}"+"&offset="+window.__offset,
            dataType: "json",
            cache: false,
            success: function (response) {
                    $('.card-deck').append(response.classifiedList);
                    $('#spinner').hide();
                    console.log(response);

                   // Note that here, server side response must have next offset and hasMoreData attribut.
                    window.__isFetching = false;
                    window.__hasMoreData = response.hasMoreData;
                    window.__offset = response.offset

            },
            error: function (response) {
                console.log(response);
            }
        });
  }

在服务器端，即symfony中，您可能需要执行以下操作：

// Get offset from request query
$start= $request->query->get('offset');
$limit= 6;

$query = $repository->createQueryBuilder('classified')
    ->join('classified.statusId','status')
    ->andWhere('status.name=:status')
    ->setParameter('status','active')
    ->setFirstResult($start)
    ->setMaxResults($limit)
    ->getQuery();

  $results = $query->getResult();

if ($request->isXmlHttpRequest()){

    $list = $this->renderView('search-result.html.twig', [
        'results' => $results
    ]);


$response = new JsonResponse();
// And add offset and hasMoreData fields in response
$response->setData(array(
  'classifiedList' => $list,
   'offset' => $start += 1
   'hasMoreData' => count($list) < ($limit * &start)
  )
);
return $response;

//从请求查询获取偏移量
$start=$request->query->get（'offset'）；
$limit=6；
$query=$repository->createQueryBuilder（'classified'）
->join（'classified.statusId'，'status'）
->andWhere（'status.name=：status'）
->setParameter（'状态'，'活动'）
->setFirstResult（$start）
->setMaxResults（$limit）
->getQuery（）；
$results=$query->getResult（）；
如果（$request->isXmlHttpRequest（））{
$list=$this->renderView（'search-result.html.twig'[
“结果”=>$results
]);
$response=新的JsonResponse（）；
//并在响应中添加offset和hasMoreData字段
$response->setData（数组）(
“分类列表”=>$list，
“偏移量”=>$start+=1
“hasMoreData”=>count（$list）<（$limit*&start）
)
);
返回$response；

您需要跟踪ajax是否正在请求，因此当窗口达到滚动限制时，它不会多次请求。此外，您还需要跟踪偏移量以及是否有更多数据要加载。例如

 window.__isFetching = false;
 window.__offset = 0;
 window.__hasMoreData = true;

 $(window).scroll(function () {
    if($(window).scrollTop() + $(window).height()>= $(document).height()){

      if(!window.__isFetching && window.__hasMoreData) {
         getmoredata();
      }
    }

 })

 function getmoredata() {
        window.__isFetching = true;
        $.ajax({
            type: "GET",
            // NOTE, you can pass current offset here in url
            url: "{{ path('classified_list', {'type' : 'all', }) }}"+"&offset="+window.__offset,
            dataType: "json",
            cache: false,
            success: function (response) {
                    $('.card-deck').append(response.classifiedList);
                    $('#spinner').hide();
                    console.log(response);

                   // Note that here, server side response must have next offset and hasMoreData attribut.
                    window.__isFetching = false;
                    window.__hasMoreData = response.hasMoreData;
                    window.__offset = response.offset

            },
            error: function (response) {
                console.log(response);
            }
        });
  }

在服务器端，即symfony中，您可能需要执行以下操作：

// Get offset from request query
$start= $request->query->get('offset');
$limit= 6;

$query = $repository->createQueryBuilder('classified')
    ->join('classified.statusId','status')
    ->andWhere('status.name=:status')
    ->setParameter('status','active')
    ->setFirstResult($start)
    ->setMaxResults($limit)
    ->getQuery();

  $results = $query->getResult();

if ($request->isXmlHttpRequest()){

    $list = $this->renderView('search-result.html.twig', [
        'results' => $results
    ]);


$response = new JsonResponse();
// And add offset and hasMoreData fields in response
$response->setData(array(
  'classifiedList' => $list,
   'offset' => $start += 1
   'hasMoreData' => count($list) < ($limit * &start)
  )
);
return $response;

//从请求查询获取偏移量
$start=$request->query->get（'offset'）；
$limit=6；
$query=$repository->createQueryBuilder（'classified'）
->join（'classified.statusId'，'status'）
->andWhere（'status.name=：status'）
->setParameter（'状态'，'活动'）
->setFirstResult（$start）
->setMaxResults（$limit）
->getQuery（）；
$results=$query->getResult（）；
如果（$request->isXmlHttpRequest（））{
$list=$this->renderView（'search-result.html.twig'[
“结果”=>$results
]);
$response=新的JsonResponse（）；
//并在响应中添加offset和hasMoreData字段
$response->setData（数组）(
“分类列表”=>$list，
“偏移量”=>$start+=1
“hasMoreData”=>count（$list）<（$limit*&start）
)
);
返回$response；

否。将您的行添加到ajax，然后我得到了重复的结果。您还必须对服务器端代码进行一些改进，请查看我的编辑。仍然没有帮助。当我在scroll上打印偏移值时，它总是显示1，这意味着递增不起作用。

$start=$request->get（'offset'））

这行吗？我得到了空值！你的意思是

$start=$request->query->get（'offset'））

？注意

查询

属性否。将您的行添加到ajax，然后我得到了重复的结果。您还必须对服务器端代码进行一些改进，请查看我的编辑。仍然没有帮助。当我在滚动上打印偏移值时，它总是显示1，这意味着递增不起作用。

$start=$requeest->get（'offset'）；

这行得通吗？我得到了空值！你的意思是

$start=$request->query->get（'offset'））

？请注意

查询

属性只有在启用javascript时，您似乎要走的方向才会起作用。这对搜索引擎来说是非常糟糕的，因为它们通常没有javascript，导致排名较低。请查看SEO友好的无限滚动。@JeroenfigeInfiniteajaxScroll.com也需要javascript。它是jQuery的插件，不是吗？是的，但它使用渐进式增强，并在没有JavadScript/ajax依赖项的情况下依赖服务器端分页。搜索引擎也将使用服务器端分页进行索引。@Jeroenfigeya，所以如果我添加分页，这应该可以解决问题，不是吗？只有当javascript已启用。这对搜索引擎来说是非常糟糕的，因为它们通常没有javascript，导致排名较低。请查看对SEO友好的无限卷轴。@JeroenfigeInfiniteAjaxScroll.com也需要javascript。它是jQuery的插件，不是吗？是的，但它使用渐进增强，并返回到服务器端没有JavadScript/ajax依赖项的分页。搜索引擎也将使用服务器端分页进行索引。@Jeroenfigeya，所以如果我添加分页，这应该可以解决问题，不是吗？