I den här handledningen visar jag dig hur du dynamiskt kan ladda data på div scroll med php, mysql, jquery och ajax eller så kan du säga att facebook gillar personsökning, när någon gång användaren kommer att vara längst ner på div eller sida så kommer nya data att finnas laddas omedelbart.
I det här exemplet har jag en databas över länder och jag måste visa alla länders lista i div, så när en användare scrollar land div kommer nästa lista med länder att laddas.
Skapa först och främst länderdatabas.
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 ; |
Skapa php-fil för att skapa anslutning till databasen och hämta länder enligt gränsen.
<?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);
}
?> |
Skapa nu html-fil och lägg in lite css och 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> |
Skriv sedan jquery för att skicka förfrågan till servern på 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 kommer din sista index.html-fil att vara
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> |
Se livedemo och ladda ner källkod.
| DEMO | LADDA NED |