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

Question

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
                                    }
                                });
                            }
                        });

Answer 1

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
                }
            });
        }
    });
});