繁体   English   中英

无限滚动不适用于AJAX

Infinite scroll not working properly with AJAX

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试使用AJAX和PHP实现无限滚动。 但是它不能正常工作。 我正在尝试执行搜索操作。 每当用户搜索某个字符串而不是一次加载整个详细信息时。 一次加载5个细节(在生产中将增加到50个)。 我正在使用AJAX。 这是我的PHP代码:

$get_elements_by_date = Jsonresponse::dbconnect()->prepare("SELECT * FROM paths INNER JOIN data ON data.filepath = paths.path_id INNER JOIN user ON data.data_user_id = user.user_id where paths.dir_path like :val and data.date_uploaded = :date_up and user.session_id = :session limit :lim offset :off");
    $get_elements_by_date->bindParam( ":session", $_SESSION['user']);

$get_elements_by_date->bindValue(':lim', (int)$lim, PDO::PARAM_INT);
$get_elements_by_date->bindValue(':off', (int)$off, PDO::PARAM_INT);
$get_elements_by_date->bindParam(':val', $val);
$get_elements_by_date->bindParam(':date_up', $_POST['date']);
$get_elements_by_date->execute();
$details = $get_elements_by_date->fetchall(PDO::FETCH_ASSOC);

我正在返回获取的元素。

这是我用于初始搜索的JS代码:

off_search = 0;
$.post('../BaseClass', {
  action: 'search_by_date',
  search: value,
  key: $(".custom-select").val(),
  token: $("#token").val(),
  date: $("#input_date").val(),
  offset: off_search,
},function(data) {
  off_search += 5;
  console.log(off_search);
  if(data.data[0] == 'no')
  {
  $(".loading1").remove();
  $(".table").remove();
  $(".upload_content").append("<center><h1 class='result' style='color:red;'>No records found<h1><center>");
  }
  else
  {
   // construct the table out of details
  }

off_search是充当sql查询中的偏移量的值。 每当我得到5个详细信息时,我都会增加它。

这是我的代码,将详细信息加载到表中

if(search_values_completed == 1)
{
console.log("returned here " + search_values_completed);
return;
}
$.post('../BaseClass', {
action: 'search_by_date',
search: value,
key: $(".custom-select").val(),
token: $("#token").val(),
date: $("#input_date").val(),
offset: off_search,
},function(data) {
console.log("search values is " + search_values_completed);
if(search_values_completed == 1)
{
  return;
}
off_search += 5;
console.log(off_search);
if(data.data[0] == 'no') {
  // perform no operation.
  search_values_completed = 1;
}
else
{
  //add to table
}

上面的代码是int名为load_search()的函数,我在

$(window).scroll(function() {
if((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        load_content()
 }
 }

一旦所有响应都发送到站点,为防止进一步的请求,我正在使用search_values_completed变量。

我的问题是AJAX是异步的,当我滚动到底部时,它被多次调用。 有时它正在请求具有相同偏移值的数据。 这导致数据重复。 有什么办法可以防止它吗?

接受任何建议,需要帮助

如果对此问题有任何疑问,请发表评论

问题暂未有回复.您可以查看右边的相关问题.
1 Ajax无限滚动不适用于Laravel表

我想在带有laravel的页面中显示表格,并且想添加无限滚动以在滚动后加载更多行。 我正在使用ajax来执行此操作,但它似乎无法正常工作,并且控制台中没有出现错误。 这是我的控制器功能: 这是我的桌子: 这是我的脚本: 当我在脚本中管理response.html时 ...

2 使用ajax无限滚动不适用于Chrome

好的,所以在对这个网站进行了大量研究之后,我编写了代码来执行无限滚动。 JS: 事实是,这在Mozilla中运行时非常好。 但是当我在Chrome或Opera中尝试相同时,它无法正常工作。 你能帮帮我,告诉我问题所在吗? ...

4 无限滚动不适用于ngInfiniteScrol

我是AngularJS的新手,并尝试使用https://github.com/sroze/ngInfiniteScroll实现无限滚动。 但是,我的代码在浏览器的控制台上给了我以下错误。 让我感到困惑的是,它指向的是我正在使用的库中的代码,而不是我的代码。 这是我方面的错误还是某些链接 ...

5 无限滚动不适用于砌体吗?

我的博客使用砖石风格。 我想向我的博客添加无限滚动 。 我正在使用自定义php代码(不使用任何框架)。 我尝试从以下网站使用无限滚动jquery: http : //infiniteajaxscroll.com/ 。 它对我不起作用。 这是我的代码: 有人可 ...

6 jQuery不适用于无限滚动

我刚刚制作了一个新的wordpress主题,并且正在使用以下脚本来获得类似手风琴的效果。 我刚刚激活了jetpack的无限滚动 。 jQuery脚本不适用于无限滚动添加的新加载内容。 我的猜测是,每当无限滚动添加新内容时,都必须重新加载或至少触发脚本。 我整天都在网上搜索,找不到任 ...

7 无限滚动不适用于Chrome

以下是无限滚动或自动加载更多内容的脚本。 该代码在Firefox和Opera中运作良好,但在chrome中则无法运作。 虽然它显示了初始内容,但是当我向下滚动页面时,什么也没有发生。 为什么这在chrome中不起作用? 我该如何运作? ...

8 无限滚动不适用于 2 个提要

我正在使用无限滚动。 我为我的问题制作了一个示例CodePen 。 我已经开始了一个提要……它本身就完美无缺。 但是,我有 2 个按钮,一个会请求提要 1,一个会请求提要 2。 如果您加载页面并且根本不滚动并请求提要 2(也不要滚动提要 2),然后返回提要 1,然后滚动它可能会让您滚动浏览某些页面 ...

9 无限滚动不适用于iPhone

我正在使用$(window).scrollTop() + $(window).height() == $(document).height()来触发Ajax并在PC上加载更多内容,但是在iPhone上不起作用。 然后我发现有人建议使用&gt;=代替。 但是,它仍然无法在iPhone上运行。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM