このチュートリアルでは、php、mysql、jquery、ajaxを使用してdivスクロールにデータを動的にロードする方法を示します。または、ページングのようにfacebookと言うこともできます。ユーザーがdivまたはページの一番下に来ると、新しいデータは次のようになります。すぐに読み込まれます。
この例では、国のデータベースがあり、div内にすべての国のリストを表示する必要があるため、ユーザーが国のdivをスクロールすると、次の国のリストが読み込まれます。
まず、国データベースを作成します。
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> |
ライブデモを参照し、ソースコードをダウンロードしてください。
デモ | ダウンロード |