I denne tutorial vil jeg vise dig, hvordan du dynamisk kan indlæse data på div scroll ved hjælp af php, mysql, jquery og ajax, eller du kan sige, at facebook kan lide personsøgning, når en bruger vil være bunden af div eller siden, vil nye data blive indlæses øjeblikkeligt.
I dette eksempel har jeg en database over lande, og jeg skal vise alle landelister inde i div, så når brugeren ruller land div vil næste liste over lande blive indlæst.
Først og fremmest skal du oprette en landedatabase.
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 ; |
Opret php-fil for at oprette forbindelse til databasen og hente landeliste i henhold til 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);
}
?> |
Opret nu html-fil og indsæt noget css og 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 derefter jquery for at sende anmodning til serveren 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 bliver din endelige index.html fil
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 live demo og download kildekode.
| DEMO | DOWNLOAD |