使用 PHP 在页面向下滚动时加载 Ajax 数据

Posted

技术标签:

【中文标题】使用 PHP 在页面向下滚动时加载 Ajax 数据【英文标题】:Load Ajax data while page scrolls down using PHP 【发布时间】:2015-06-19 19:58:51 【问题描述】:

使用这样的功能在页面向下滚动时加载数据

$(window).scroll(function()
        if ($(window).scrollTop() == $(document).height() - $(window).height())
        
            //alert('Scrolling Down');
            get_summary_details(); //Here it calls AJax Function load the data

        
    );

get_summary_details()函数在页面向下滚动时工作正常。这个函数是这样的

function get_summary_details()
    

        var dataString=[];
        $('div.company_summary_data').each(function() 
            var id = $(this).attr('id');
            dataString.push(id);
        );                     
        $.ajax(
            url:"getajaxcompanysummarydetails",
            type:"POST",
            //dataType: "json",
            data:"last_app_data_id="+JSON.stringify(dataString),
            success:function(data)
                                           
                $('.company_summary_data:last').after(data);

            

        );         
    

我的问题是

get_summary_details() 处理请求用户将转到页面的topScroll down 时,此get_summary_details() 函数将再次执行。

如何防止没有完成第一个请求的第二个请求处理。这可能吗?因此,我得到了重复的数据记录。我需要防止显示重复的记录。

谢谢!

【问题讨论】:

如何使用Boolean 标志来检查请求是否在处理中? 对不起,我没有得到你。你能简单解释一下吗..@Regent 【参考方案1】:

您的 AJAX 请求很可能一个接一个地排队,因为它们是异步的,尽管 javascript 本身大多是单线程的。

您可以使用abort() 方法来确保一次只运行一个请求。你需要将$.ajax()返回的jqXHR对象赋值给一个变量:

请参考link

【讨论】:

【参考方案2】:

你需要通过设置一个布尔标志来检查ajax请求是否繁忙

var loadingSummaryDetails = false;

启动 Ajax 时设置为 true,调用结束时设置为 false

function get_summary_details()

    if(loadingSummaryDetails) 
        return;
    
    loadingSummaryDetails = true;

    var dataString=[];
    $('div.company_summary_data').each(function() 
        var id = $(this).attr('id');
        dataString.push(id);
    );                     
    $.ajax(
        url:"getajaxcompanysummarydetails",
        type:"POST",
        //dataType: "json",
        data:"last_app_data_id="+JSON.stringify(dataString),
        success:function(data)
             
            $('.company_summary_data:last').after(data);

        

    ).always(function()
             
            loadingSummaryDetails = false;
        );         

【讨论】:

@user3454479 loadingSummaryDetails 是我所说的Boolean 标志。 @Regent 我现在改成使用 always 方法

以上是关于使用 PHP 在页面向下滚动时加载 Ajax 数据的主要内容,如果未能解决你的问题,请参考以下文章

网页源码中数据存在,使用selenum却解析不到数据的一种解决方法。

向下滚动到 Fancybox 窗口中的元素(ajax 加载的内容)

On 向下滚动如何进行 ajax 调用并获取响应数据

Vue页面在加载时不会向下滚动

当页面到达底部时,ajax 和 php 从 mysql 加载更多内容

在 React.js 中向下滚动页面时如何加载更多搜索结果?