sql >> Database >  >> RDS >> Mysql

Dynamisch gegevens laden op div-scroll met behulp van php, mysql, jQuery en ajax

In deze tutorial laat ik je zien hoe je dynamisch gegevens op div-scroll kunt laden met php, mysql, jquery en ajax of je kunt zeggen dat facebook zoals paging, wanneer een gebruiker onderaan de div of pagina staat, nieuwe gegevens zullen worden onmiddellijk geladen.

In dit voorbeeld heb ik een database met landen en ik moet alle landenlijsten in de div weergeven, dus wanneer de gebruiker ooit door de land-div bladert, wordt de volgende lijst met landen geladen.

Maak eerst een landendatabase.

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 ;


Maak een php-bestand om verbinding te maken met de database en haal de landenlijst op volgens de limiet.

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




Maak nu een html-bestand en plaats wat css en 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>





Schrijf daarna jQuery om het verzoek naar de server te sturen op 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>

Nu wordt uw uiteindelijke index.html-bestand

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>

Bekijk live demo en download broncode.

DEMO DOWNLOAD

Als je dit bericht leuk vindt, vergeet dan niet je te abonneren op mijn openbare notitieboek voor meer nuttige dingen


  1. MySQL in 2018:What's in 8.0 en andere observaties

  2. PostgreSQL versus MySQL

  3. Registreer wijzigingen in SQL-server in een controletabel

  4. MySQL en JDBC met rewriteBatchedStatements=true