Динамично зареждане на данни при превъртане на div с помощта на php, mysql, jquery и ajax

В този урок ще ви покажа как можете динамично да зареждате данни при превъртане на div с помощта на php, mysql, jquery и ajax или можете да кажете, че facebook като пейджинг, Когато някой потребител ще бъде в долната част на div или страницата, тогава ще бъдат нови данни се зарежда незабавно.

В този пример имам база данни с държави и трябва да покажа списъка с всички държави вътре в div, така че когато някога потребителят превърти div country, следващият списък с държави ще бъде зареден.

Първо създайте база данни за държави.

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 ;

Създайте php файл, за да осъществите връзка с базата данни и да извлечете списъка с държави според ограничението.

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

Сега създайте html файл и поставете малко css и 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>

След това напишете jquery, за да изпратите заявка до сървъра при превъртане на div

<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>

Сега окончателният ви файл index.html ще бъде

index.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>

Вижте демонстрация на живо и изтеглете изходния код.

Динамично зареждане на данни при превъртане на div с помощта на php, mysql, jquery и ajax

index.html

ДЕМО ИЗТЕГЛЯНЕ

Ако ви харесва тази публикация, моля, не забравяйте да се абонирате за моя обществен бележник за още полезни неща