Mysqlの無限ページスクロール機能が動作しない

mysqlからデータを取得していますが、ページスクロールが機能しません。Mysqlの無限ページスクロール機能が動作しない

これは10個の結果（1-10）を表示しているだけで、結果が表示されない場合はスクロールします。

これは私のload.phpファイル

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="load_style.css"> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(window).scroll(function() 
    { 
     if($(body).height() <= $(window).scrollTop() + $(window).height()) 
     { 
     loadmore(); 
     } 
    }); 

    function loadmore() 
    { 
     var val = document.getElementById("row_no").value; 
     $.ajax({ 
     type: 'post', 
     url: 'get_resultts.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)+10; 
     } 
     }); 
    } 
    </script> 

    </head> 

    <body> 

     <h1>Load Results From Database On Page Scroll Using jQuery,Ajax And PHP</h1> 
     <div id="all_rows"> 
     <?php 

      $db = mysqli_connect("localhost", "root", "", "text"); 
      $sql="select text from text limit 0,10"; 
      $select = mysqli_query($db, $sql); 
      while($row=mysqli_fetch_array($select)) 
      { 
      echo "<p class='rows'>".$row['text']."</p>"; 
      } 
     ?> 
     </div> 
     <input type="hidden" id="row_no" value="10"> 

    </body> 
    </html>

これは、任意のヒント/ヘルプは高く評価され

<?php 

    if(isset($_POST['getresult'])) 
    { 
    $db = mysqli_connect("localhost", "root", "", "text"); 

    $no = $_POST['getresult']; 
    $sql = "select text from text limit $no,10"; 
    $select = mysqli_query($db, $sql); 
    while($row = mysqli_fetch_array($select)) 
    { 
     echo "<p class='rows'>".$row['text']."</p>"; 
    } 
    exit(); 
    } 

?>

get_resultts.phpです。

出典

2017-03-05 Imr An

さらにデバッグデータを提供しますが、デバッグコンソールで何らかのエラーが発生しましたか？ – bxN5

エラーが発生していません。しかし、ページスクロール機能は動作しません。例えば、1 2 3 4 ..、。 10件の結果がmysqlから表示されていますが、ページはそれ以上ロードされていません。申し訳ありません。これは初心者です –

あなたのコンテンツ変数には何がありますか？ – bxN5

ここにはいくつか問題があります。まず、bodyタグを正しく参照していないということです。

$("body")...

（あなたのスクリプトで行ったように）ではありません。

第2の問題は、コンテンツが利用可能なスペースを満たさない可能性があることです。コンテンツのスクロールが十分でない場合、スクロールイベントは発生しません。したがって、bodyタグが修正されてもイベントは決して発射しようとはしません。あなたは簡単に所定の位置に文書readyイベントのループのいくつかの種類を置くことができます：

$(document).ready(function() { 
    ... (repeat similar check until content fills space) ... 
}

最後の問題は、スクロールに応じて、あなたは簡単にloadmore（）関数の複数のトリガーを得ることができる、ということです。これはあなたのページが同一の行番号を持つ複数の並列Ajax要求を引き起こし、多数の繰り返し要求が連続して出現することにつながります。

これを防ぐには、このようなajaxクエリを1つだけ実行するようにしてください。これを行うには複数の方法がありますが、開かれているアクティブなAjax問合せの数を追跡し、前の問合せが完了した場合にのみ進めます。例えば： - のいずれかが正常に完了かのエラーをトリガしなければならないクエリ

var countAjax = 0; 
function loadMore() { 
    if (countAjax>0) return; 
    $.ajax({ 
     beforeSend: function() { 
      countAjax++; 
     }, 
     ... (other settings) ... 
     success: function(response) { 
      countAjax--; 
      ... (other success events) ... 
     }, 
     error: function() { 
      countAjax--; 
      ... (other error events) ... 
     } 
    }); 
}

これにより、ページがしかむしろ並行して複数のものよりも、一度に一つのAJAXリクエストを実行していることを確認しますカウンタを再び0にデクリメントし、それが起こるまで別のクエリを試行しません。

出典

2017-03-05 23:41:44

私はこのページのスクロールのようにしたいデモです[リンク]（http://talkerscode.com/webtricks/demo/demo_load-results-from-database-on-page-scroll-using-jquery-ajax- -php.php} –

あなたが提供したリンクの例を見ると、私が言及しているデータ繰返しエラーを見ることができます。このページは同じAjaxリクエストの複数のコピーを生成し、いくつかの重複データセット。 –

あなたのコードを実装しようとしています@Rob Wilkins –

Mysqlの無限ページスクロール機能が動作しない

答えて

関連する問題