AJAX 函数无法通过滚动工作

php javascript jquery ajax pdo

2022-08-30 17:12:35

使用AJAX进行无尽滚动。内容仅首次加载，但不会通过滚动加载。

怎么了？

jQuery：

function loadFeed() {
    $.ajax({
        url: 'loadmore.php',
        dataType: 'html',
        success: function (data) {
            $("#posts").append('<div class="havanagila"></div>');
            $('#posts').html(data);
        }
    });
}

loadFeed();
$(window).scroll(function () {
    var windowScroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    var documentHeight = $(document).height();

    if ((windowScroll + windowHeight) == documentHeight) {
        loadFeed();
    }
});

加载更多.php：

<?php 
session_start();

if ( isset( $_SESSION['login'] ) ) {

    $login    = $_SESSION['login'];
    $id=$_SESSION['id'];

    $username="root";
    $password="root";
    $hostname = "localhost";
    $dbname= "kotik";


    function testdb_connect ($hostname, $username, $password){
        $dbh = new PDO("mysql:host=$hostname;dbname=kotik", $username, $password);
        return $dbh;
    }


    try {
        $dbh = testdb_connect ($hostname, $username, $password);

    } catch(PDOException $e) {
        echo $e->getMessage();
    }

}

?>

<?php                                                              

$title_select_query= $dbh -> prepare("SELECT title FROM books WHERE id = :id ORDER BY date DESC");
$title_select_query ->execute(array(':id' => $id));
$title_select_query_result = $title_select_query->fetchColumn(); 
echo($title_select_query_result);

$title_select_query_result = $title_select_query->fetchColumn(); 
echo($title_select_query_result);

$title_select_query_result = $title_select_query->fetchColumn(); 
echo($title_select_query_result);

$title_select_query_result = $title_select_query->fetchColumn(); 
echo($title_select_query_result);

$title_select_query_result = $title_select_query->fetchColumn(); 
echo($title_select_query_result);

?>

答案 1

因为您替换了 $（'#posts'）的内容，所以在 scroll => 上第一次 ajax 请求后，文档的高度不会改变，因此您需要向上滚动，然后再次向下滚动以触发另一个 ajax 请求。因为我不知道预期的页面布局，所以我会给一个简单的基本演示HTML JSFiddle演示

<div id="main" style="height:200px; overflow-y : auto;">
    <div id="posts">
    </div>
</div>

javascript

var loadmoore = true,
    loaded_posts =0 ;
function gent_sample_data(num_posts){
    var i,
        sample_data = '';
    for(i=0;i<num_posts;i++) {
        sample_data += "<p class'post'>title_select_query_result " + (loaded_posts + i) + "</p>"; 
    }
    return sample_data;
}

function loadFeed(){
     // generate sample data
    var sample_data = gent_sample_data(15);
    loaded_posts = loaded_posts + 15;
    $.ajax({
        url : '/echo/html/',
        dataType: 'html',
        type: 'post',
        data: {'html':sample_data},
        success: function(returnhtml){
            console.log(returnhtml);
             // option 1 - add result into "havanaglia" div
            // var $post = $('<div class="havanagila"></div>');
            // $post.html(returnhtml);
            // $("#posts").append($post);

            // option 2 - ad result after "havanaglia" div
            $("#posts").append('<div class="havanagila"></div>');
            $("#posts").append(returnhtml); 
            loadmoore = true;
        }    
    });
}
loadFeed();

$("#main").scroll(function () { 
    if (loadmoore && $("main").scrollTop() >= ($("main").height()-100) ) {
       loadmoore = false;
       loadFeed();
    }
});

对于您的情况，我建议使用如下内容：

var loadmoore= true;
function loadFeed() {
    $.ajax({
        url: 'loadmore.php',
        dataType: 'html',
        success: function (data) {
            var $havanaglia = $('<div class="havanagila"></div>');
            $havanaglia.html(data);
            $("#posts").append($havanaglia);
            loadmoore = true;
        }
    });
}

loadFeed();

$(window).scroll(function () { 
    if (loadmoore && $(window).scrollTop() >= $(document).height() - $(window).height()-100) {
        loadmoore= false;
       loadFeed();
    }
});

为了防止从数据库中获取相同的帖子，我建议将上次加载的帖子的ID/编号发送到php，以获取具有id/编号的帖子>上次加载的帖子

答案 2

如果要为每个滚动事件加载函数，则无需检查条件。简单地写..AJAXif

$(window).scroll(function(){
        loadFeed();
});

如果你想调用函数，如果滚动已经到达底部，你必须检查条件，如...AJAX

$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()){
        loadFeed();
    }
});