Question

我一直在找一个没有运气的答案，所以我决定来这里...

当用户滚动到页面底部时，我希望页面将数据从数据库动态加载到<div>。

每组新数据都应在最后一组之后5条记录。

如果有人可以抽出时间浏览我的代码，我将永远感激不已...

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>loaded</title>
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
  
</head>
<style>
body{
	font-family:helvetica;
	background-color:#58ACFA;
	width:100%;
}
h1{
	text-align:center;
	font-size:35px;
	margin-top:50px;
	color:#0B173B;
}
#all_rows{
    overflow-y: scroll;
    height: 400px;
}
#load{
    border: 1.5px black solid;
    height: 200px;
    width: 100px;
	background-color:#0B3861;
    color:white;
	padding:20px;
	margin-top:40px;
	font-size:20px;
    }
</style>
</script>

<body>
<script type="text/javascript">
$("#all_rows").scroll(function ()
{
	if($("#load").height() <= $("#all_rows").scrollTop() + $("#all_rows").height())
	{
		loadmore();
	}
});

function loadmore()
{
  var val = document.getElementById("row_no").value;
  $.ajax({
  type: 'post',
  url: 'get_results.php',
  data: {
    getresult:val
  },
  success: function (response) {
	  
	var content = document.getElementById("all_rows");
    content.innerHTML = content.innerHTML+response;

    // We increase the value by 10 because we limit the results by 10
    document.getElementById("row_no").value = Number(val)+5;
  }
  });
};
</script>


  <h1>Load Results From Database On Page Scroll Using jQuery, Ajax And PHP</h1>
  <div id="all_rows">
    <?php
    $conn = mysqli_connect("localhost", "id5757217_testsql01", "9977553311", "id5757217_testsql1");
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
}
$sql = ("SELECT * FROM insertion LIMIT 0,5");

    $result = $conn->query($sql);
    while ( $row = $result-> fetch_array()) {
        echo "<div id = 'load'>";
        echo "<div id = 'load1'>" . $row['Title'] . "</div>";
        echo "<div id = 'load2'>" . $row['Description'] . "</div>";
        echo "<div id = 'get'>" . "<a href = '" .  $row['Link'] . "' target = '_blank' id = 'anchor'> Get This file </a> </div>";
        echo "</div>";
      }
            $conn->close();
 ?>
  </div>
  <input type="hidden" id="row_no" value="5">

</body>
</html>

这是“ get_results.php”页面：

<?php

  if(isset($_POST['getresult']))
  {
    $conn = mysqli_connect("localhost", "id5757217_testsql01", "9977553311", "id5757217_testsql1");
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
}
    $no = $_POST['getresult'];
$sql = ("SELECT * FROM insertion LIMIT $no,5");

    $result = $conn->query($sql);
    while ( $row = $result-> fetch_array()) {
        echo "<div id = 'load'>";
        echo "<div id = 'load1'>" . $row['Title'] . "</div>";
        echo "<div id = 'load2'>" . $row['Description'] . "</div>";
        echo "<div id = 'get'>" . "<a href = '" .  $row['Link'] . "' target = '_blank' id = 'anchor'> Get This file </a> </div>";
        echo "</div>";
      }
    exit();
  }
 ?>

谢谢！

Answer 1

使用以下代码，我给出了一个简单的示例：

<html>
<head>
</head>
<body>
<div id="userData">
</div>
</body>
</html>

正在加载

 $(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
        var last_id = $("#userData a:last-child").attr('id');
        if(last_id == "" || last_id == undefined)
        {
           last_id=0;
         }
        loadMoreData(last_id);
    }
});
**

功能加载更多数据

function loadMoreData(last_id) {
    $.ajax(
        {
            url: 'get_results.php?last_id=' + last_id ,
            type: "get",
            beforeSend: function () {
                $('.ajax-load').show();
            }
        })
        .done(function (data) {
             $('.ajax-load').hide();
            $("#userData").append(data);
        })
        .fail(function (jqXHR, ajaxOptions, thrownError) {
            console.log('server not responding...');
        });
}

在控制器上，您将收到ID，并选择比当前收到的ID大的数据

    <?php

      if(isset($_GET['last_id']))
      {
        $conn = mysqli_connect("localhost", "id5757217_testsql01", "9977553311", "id5757217_testsql1");
            if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
    }

 if($lastId!=0){
    $sql = ("SELECT * FROM insertion where id < '" . $lastId . "' ORDER BY id DESC LIMIT 5");
}else{
    $sql = ("SELECT * FROM insertion ORDER BY id DESC LIMIT 5");
}    
        $result = $conn->query($sql);
        while ( $row = $result-> fetch_array()) {
            echo "<div id = 'load'>";
            echo "<div id = 'load1'>" . $row['Title'] . "</div>";
            echo "<div id = 'load2'>" . $row['Description'] . "</div>";
            echo "<div id = 'get'>" . "<a href = '" .  $row['Link'] . "' target = '_blank' id =  '" .  $row['id'] . "'> Get This file </a> </div>";
            echo "</div>";
          }
        exit();
      }
     ?>

如何在页面滚动时动态检索数据到div

1 个答案: