sql >> データベース >  >> RDS >> Mysql

php、mysql、jquery、ajaxを使用してdivスクロールにデータを動的にロードする

    このチュートリアルでは、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>

    ライブデモを参照し、ソースコードをダウンロードしてください。

    デモ ダウンロード

    この投稿が気に入った場合は、私の公開ノートブックを購読して、より便利なものを入手することを忘れないでください


    1. Python、Ruby、およびGolang:Webサービスアプリケーションの比較

    2. PostgreSQLで配列に挿入する方法

    3. ネストされた結合でrow_to_json()を使用する

    4. Common Table Expression(CTE)を使用する場合