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

I've seen some answers to this question on this site already, but i still haven't been able to implement it as i want to for 2 days now. I'm sort of a beginner so a very clear explanation would be of great help,

i have a mysql database of some data, i want to read from a table and display 30 rows at a time, when the user scrolls to the end of the page, i want to load another 30 rows (i have been able to do the first 30, but loading the remaining is a challenge for me).

i already have this:

$(document).ready(function(){   
       $(window).scroll(function() {
           if($(window).scrollTop() == $(document).height() -$(window).height()) {
               //ive tried all sorts of things here it just doesnt work
           }
});

also an example of the php file that loads the next contents would help,

i'm using php and mysqli

thanks a lot in advance.

so this is my loadmore.php, its for the functionality, haven't styled the output:

<?php 
require_once 'functions.php'; //my databse connection is in this file

//i created a function queryMysql($query) in functions.php, thats what is used here 
$result = queryMysql("SELECT * FROM articles WHERE live='1' ORDER BY created DESC LIMIT $start, 30");
$num = $result->num_rows;

for ($j = 0 ; $j < $num ; ++$j){
    $row = $result->fetch_array(MYSQLI_ASSOC);
    $title = $row['title'];
    $subtitle = $row['subtitle'];
    echo "$title<br />$subtitle";                                                    
}?>

for the ajax, i changed it to the first answer i got here, but all my attempts have looked like this:

 $(window).scroll(function() {
                            if($(window).scrollTop() == $(document).height() - $(window).height()) {
                                $.ajax({
                                    type: method,
                                    data: {}, //Your data
                                    url: 'loadmore.php',
                                    async: true,
                                    success: function (data, textStatus, jqXHR) {
                                        $('#article-inro-hold').append(data);
                                    },
                                    error: function (jqXHR) {
                                        //Error handler
                                    }
                                });
                            }
                        });

Try to implement jquery ajax, something rough like this:

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            $.ajax({
                type: method,
                data: {}, //Your data
                url: 'your/url/to/get/more/content/from',
                async: true,
                success: function (data, textStatus, jqXHR) {
                    $('#myDiv').append(data);
                },
                error: function (jqXHR) {
                    //Error handler
                }
            });
        }
    });
});

You have to make an ajax call for each time, when you scroll amount get up, nearer to document height. Along with you also have to manage your offset, otherwise you will get duplicate records (You can use hidden field for that), and pass it each time in your ajax call.

<div id="ajax-response"></div>
<input type="hidden" value="0" id="offset" />

<script>
$(document).ready(function(){   
    $(window).scroll(function() {
        if($(window).scrollTop() == $(document).height() - $(window).height()) {

           $.ajax({
               url: 'requesthandler.php',
               type: 'post',
               data: {
                    task: 'show-more',
                    offset: document.getElementById('offset').value
               },
               success: function(response){
                    jsonObj = $.parseJSON(response);
                    $('#ajax-response').append(jsonObj.html);
                    document.getElementById('offset').value = jsonObj.offset;
               }
           })
        }
    });
});

and requesthandler.php will look like:

if($_POST['task'] == 'show-more'){
    $offset = (int) $offset;
    $sql = "SELECT * FROM table limit $offset, 10";
    $data = '';
    foreach ($conn->query($sql) as $row) {
        $data .= "<div>$row['column']</div>";
    }
    echo json_encode(array(
        'offset' => ($offset + 10),
        'html' => $data,
    ))
}

$query = $db->query("SELECT * FROM bags ORDER BY id DESC LIMIT 7");

Can we use $_POST here to get only needed information.

$limit=($_POST["bag"]);
$query = $db->query("SELECT * FROM bags WHERE id = '.$limit.' ORDER BY id DESC LIMIT 7");