Dynamicznie ładuj dane na div scroll za pomocą php, mysql, jquery i ajax

W tym samouczku pokażę Ci, jak możesz dynamicznie ładować dane do div scrolla za pomocą php, mysql, jquery i ajax lub możesz powiedzieć, że facebook jak stronicowanie. Kiedy użytkownik znajdzie się na dole div lub strony, nowe dane będą ładowane natychmiast.

W tym przykładzie mam bazę danych krajów i muszę wyświetlić listę wszystkich krajów w div, więc za każdym razem, gdy użytkownik przewinie div country, zostanie załadowana następna lista krajów.

Przede wszystkim utwórz bazę danych krajów.

CREATE TABLE IF NOT EXISTS `countries` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`sortname` varchar(3) NOT NULL,
`name` varchar(150) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=247 ;

Utwórz plik php, aby połączyć się z bazą danych i pobrać listę krajów zgodnie z limitem.

<?php
$hostname = "localhost";
$username = "root";
$password = "root";
$dbname = "location";
$limitStart = $_POST['limitStart'];
$limitCount = 50; // Set how much data you have to fetch on each request
	if(isset($limitStart ) || !empty($limitStart)) {
	$con = mysqli_connect($hostname, $username, $password, $dbname);
	$query = "SELECT id, name FROM countries ORDER BY name limit $limitStart, $limitCount";
	$result = mysqli_query($con, $query);
	$res = array();
		while($resultSet = mysqli_fetch_assoc($result)) {
		$res[$resultSet['id']] = $resultSet['name'];
		}
	echo json_encode($res);
	}
?>

Teraz utwórz plik html i wstaw trochę css i html

<style>
.country { height: 300px; overflow: auto; width: 500px; }
.loading { color: red; }
li {font-size:24px;}
#loading { display:none; color:red; font-size:30px; }
</style>
<div class="country">
    <ul id="results"></ul>
</div>
 <span id="loading">Loading Please wait...</span>

Następnie napisz jquery, aby wysłać żądanie do serwera na div scroll

<script>
$(function() {
   loadResults(0);
    $('.country').scroll(function() {
      if($("#loading").css('display') == 'none') {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
           var limitStart = $("#results li").length;
           loadResults(limitStart); 
        }
      }
	}); 
 
function loadResults(limitStart) {
	$("#loading").show();
    $.ajax({
        url: "request.php",
        type: "post",
        dataType: "json",
        data: {
            limitStart: limitStart
        },
        success: function(data) {
               $.each(data, function(index, value) {
               $("#results").append("<li id='"+index+"'>"+value+"</li>");
             });
             $("#loading").hide();     
        }
    });
};
});
</script>

Teraz ostateczny plik index.html będzie

indeks.html

<style>
.country { height: 300px; overflow: auto; width: 500px; }
.loading { color: red; }
li {font-size:24px;}
#loading { display:none; color:red; font-size:30px; }
</style>
<div class="country">
    <ul id="results"></ul>
</div>
 <span id="loading">Loading Please wait...</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
   loadResults(0);
    $('.country').scroll(function() {
      if($("#loading").css('display') == 'none') {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
           var limitStart = $("#results li").length;
           loadResults(limitStart); 
        }
      }
	}); 
 
function loadResults(limitStart) {
	$("#loading").show();
    $.ajax({
        url: "request.php",
        type: "post",
        dataType: "json",
        data: {
            limitStart: limitStart
        },
        success: function(data) {
               $.each(data, function(index, value) {
               $("#results").append("<li id='"+index+"'>"+value+"</li>");
             });
             $("#loading").hide();     
        }
    });
};
});
</script>

Zobacz demo na żywo i pobierz kod źródłowy.

Dynamicznie ładuj dane na div scroll za pomocą php, mysql, jquery i ajax

indeks.html

DEMO POBIERZ

Jeśli podoba Ci się ten post, nie zapomnij zasubskrybować mojego publicznego notatnika, aby uzyskać więcej przydatnych rzeczy