使用 JQuery 和 PHP 向下滚动时自动加载页面

Question

我想通过从我的 postgresql 数据库中提取的数据自动加载页面滚动。

这是想要的结果：http://www.sanwebe.com/assets/ajax-load-on-scroll/

我认为问题出在index.phpand/or的Javascript代码中audoload_process.php 但我找不到问题所在。

我有 3 个文件：

Config.php 工作正常：

<?php
$db_username = 'user=myuser';
$db_password = 'password=mytest';
$db_name = 'dbname=test';
$db_host = 'host=localhost';
$items_per_group = 5;

$db = pg_connect($db_host, $db_username, $db_password, $db_name);
?>

Index.php 文件：（我测试了它的 PHP 部分在工作，我认为是 javascript 不工作）。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>

<?php
include("config.php");

    $get_total_rows = 0;

    $db = pg_connect("$db_host $db_name $db_username $db_password");
    $query = "SELECT * FROM paginate";
    $results = pg_query($query);

    $get_total_rows = pg_numrows($results); 

    //break total records into pages
    $total_groups= ceil($get_total_rows/$items_per_group);
?>

<script type="text/javascript">
$(document).ready(function() {
var track_load = 0; //total loaded record group(s)
var loading  = false; //to prevents multipal ajax loads
var total_groups = <?=$total_groups;?>; //total record group(s)

$('#results').load("autoload_process.php", {'group_no':track_load}, function() {track_load++;}); //load first group

$(window).scroll(function() { //detect page scroll

    if($(window).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?
    {

        if(track_load <= total_groups && loading==false) //there's more data to load
        {
            loading = true; //prevent further ajax loading
            $('.animation_image').show(); //show loading image

            //load data from the server using a HTTP POST request
            $.post('autoload_process.php',{'group_no': track_load}, function(data){

                $("#results").append(data); //append received data into the element

                //hide loading image
                $('.animation_image').hide(); //hide loading image once data is received

                track_load++; //loaded group increment
                loading = false; 

            }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

                alert(thrownError); //alert with HTTP error
                $('.animation_image').hide(); //hide loading image
                loading = false;

            });

        }
    }
});
});
</script>
<style>
body,td,th {font-family: Georgia, Times New Roman, Times, serif;font-size: 15px;}
.animation_image {background: #F9FFFF;border: 1px solid #E1FFFF;padding: 10px;width: 500px;margin-right: auto;margin-left: auto;}
#results{width: 500px;margin-right: auto;margin-left: auto;}
#resultst ol{margin: 0px;padding: 0px;}
#results li{margin-top: 20px;border-top: 1px dotted #E1FFFF;padding-top: 20px;}
</style>
</head>

<body>

<ol id="results">
</ol>
<div class="animation_image" style="display:none" align="center"><img src="ajax-loader.gif"></div>

</body>
</html>

autoload_process.php 文件

<?php
include("config.php"); //include config file

if($_POST) //NOT SURE IF THIS WORKS FOR Postgresql or I would need somethingk like if ($_SERVER["REQUEST_METHOD"] == "POST") 
{
echo "inside IF"  //To see if it gets to here --> It doesn't
//sanitize post value
$group_number = filter_var($_POST["group_no"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);

//throw HTTP error if group number is not valid
if(!is_numeric($group_number)){
    header('HTTP/1.1 500 Invalid number!');
    exit();
}

//get current starting point of records
$position = ($group_number * $items_per_group);

    $query = "SELECT id, name, message FROM paginate ORDER BY id ASC LIMIT $position, $items_per_group";
    $result = pg_query($query);

    $myrow = pg_fetch_assoc($result);
    $id = $myrow[id];
    $name = $myrow[name];
    $message = $myrow[message];

echo '<ul class="page_result">';
while(pg_fetch_assoc($results)){ //fetch values
    echo '<li id="item_'.$id.'"><span class="page_name">'.$id.') '.$name.'</span><span class="page_message">'.$message.'</span></li>';  
}
echo '</ul>';

pg_close();
}
?>

结果和问题

执行 Index.php

如果我在Index.php中写这段代码来查看是否正在检索信息：

$get_total_rows = pg_numrows($results); 
echo "total number of rows" .$get_total_rows;
echo '<br>';
echo '<br>';

//break total records into pages
$total_groups= ceil($get_total_rows/$items_per_group);
echo "total number of groups" .$total_groups;
echo '<br>';
echo '<br>';


while($myrow = pg_fetch_assoc($results)) {
$id = $myrow[id];
$name = $myrow[name];
$message = $myrow[message];
echo $id;
echo $name;
echo $message;
echo '<br>';
echo '<br>';

}

然后我得到（总行数= 50（正确）总组数= 10（正确）和打印的所有记录但是当我向下滚动时我得到以下错误（内部服务器错误）：页面底部出现小加载图像。（我猜这是因为我已经显示了所有 50 条记录，但它并没有像预期的那样运行。

非常感谢任何帮助。

Answer 1

您的 ajax 中存在语法错误。post - 在不需要单引号的地方。这个：

$.post('autoload_process.php',{'group_no': track_load}

应该是这样的：

$.post('autoload_process.php',{group_no: track_load}

Answer 2

因为密钥可以包含在 single/double 引号中，我怀疑它是你的 php，我看到了一些东西：

末尾缺少分号

echo "inside IF";

要进行测试，您可以尝试：

而不是：

if($_POST)

使用

if(isset($_POST["group_no"]))

并且仅用于测试，而不是

header('HTTP/1.1 500 Invalid number!');

尝试

echo "Error not a number: " . $_POST["group_no"];

更改错误将使您能够快速查看实际错误，而不是返回 500 并使其失败：内部服务器错误

这些可能不能解决问题，但至少有助于诊断。

使用 JQuery 和 PHP 向下滚动时自动加载页面

Autoload page when scrolling down with JQuery and PHP

javascript

php

ajax

jquery

autoload