1

無限スクロールが必要な UI 要素があります。だから私はjscrollを使用しています。div が最後にあるときに新しいデータをフェッチしたい。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src=js/jquery.jscroll.js></script>
<script>

$('.scrollt').jscroll(function(){
    $(".scrollt").load("/handle.php?lastdis=90");});

</script>
</head>
<body>


<?php
include_once('conn.php');

$start=0;
$query="Select * from data where id > ". $start ." Limit 90;";
$res=mysqli_query($con,$query);

echo '<div class="scrollt">';
while ($row = mysqli_fetch_array($res, MYSQL_NUM)) {
    echo "<p> ".$row[0]." &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;". $row[1]."<p><p><p>";
}

echo "</div>"

?>

</body>
</html>

つまり、基本的には、90 レコードのページを表示し、load() 関数で 91 を超えるレコードをフェッチしたいのですが、これは機能しません。

handle.php コード

<?php
include_once('conn.php');
$goahead=$_GET['lastdis'];

$query="Select * from data where id > ". $goahead ." Limit 20;";
$res=mysqli_query($con,$query);
while ($row = mysqli_fetch_array($res, MYSQL_NUM)) {
    echo "<p> ".$row[0]." &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;". $row[1]."<p><p><p>";
}

わずか 2 時間の jquery 体験です。ご容赦ください。

4

1 に答える 1

5

次のように、.scroll()イベント onを使用します。window

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

ここでテストできます。これはウィンドウの一番上のスクロールを取得するため、どれだけ下にスクロールしたか、表示されているウィンドウの高さを追加し、それがコンテンツ全体の高さと等しいかどうかを確認します ( document)。代わりに、ユーザーが最下位に近いかどうかを確認したい場合は、次のようになります。

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

ここでそのバージョンをテストでき100ます。トリガーしたい下から任意のピクセルに調整するだけです。

ここで、下部でユーザーに警告する代わりに、ajaxを使用して下部に追加するデータを取得します。

  $.ajax({
      url: "handle.php",
      type: "post",
      data: values,
      success: function(data){
           $("#result").append(data);
      },
      error:function(){
          alert("failure");
          $("#result").append('Error Occurred while fetching data.');
      }   
    });
于 2013-08-02T16:39:06.190 に答える