滚动加载数据，如果使用ajax将新记录添加到php中的数据库，则在顶部更新 - load data on scroll and update at top if new record added to database in php using ajax

我的项目有以下文件。我只想使用ajax为它再添加一个功能。

我按降序显示数据库记录，滚动时数据会被加载，，，如果向数据库中添加了新记录，则应该使用ajax更新列表，而无需重新加载页面，n个新记录应该被附加在顶部。

有人能帮我吗？或者有推荐信吗。提前谢谢。

config.php

<?php
$db_username    = 'root';
$db_password    = 'root';
$db_name        = 'mydb_demo';
$db_host        = 'localhost';
$items_per_group = 10;
$mysqli = new mysqli($db_host, $db_username, $db_password,$db_name);
?>

index.php

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Loading Records</title>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<?php
include("config.php");
$results = $mysqli->query("SELECT COUNT(*) as t_records FROM paginate");
$total_records = $results->fetch_object();
$total_groups = ceil($total_records->t_records/$items_per_group);
$results->close(); 
?>
<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 = <?php echo $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)
{
    //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);

    //Limit our results within a specified range. 
    $results = $mysqli->query("SELECT id,name,message FROM paginate ORDER BY id DESC LIMIT $position, $items_per_group");
    if ($results) { 
        //output results from database
        while($obj = $results->fetch_object())
        {
            echo '<li id="item_'.$obj->id.'">'.$obj->id.' - <strong>'.$obj->name.'</strong></span> &mdash; <span class="page_message">'.$obj->message.'</span></li>';
        }
    }
    unset($obj);
    $mysqli->close();
}
?>

您应该添加一些功能来关注变化。我将推荐长轮询方法。你可以在这里找到一个简单的教程

http://webcooker.net/ajax-polling-requests-php-jquery/

为了在顶部显示数据，您应该更改

`$("#results").append(data);`

至

`$("#results").prepend(data);`