2

データベースがあり、1000 を超えるレコードが含まれています。フロントエンドのphpページに表示する必要があります。すべて表示するとロードに時間がかかるため、ユーザーがスクロールすると、スクロール後に情報を取得する必要があります。Facebook や Pinterest と同じように。これを達成する方法... My DB :- mysql サーバー :- wamp

4

3 に答える 3

1

ステップ1]少しjqueryの助けを借りて....

var countScroll= 0;
$(window).scroll(function()
{
      if  ($(window).scrollTop() == $(document).height() - $(window).height())
      {
         loadData();
      }
      countScroll++;
});

ステップ 2] ajax の助けを借りて loadData() 関数を呼び出します

function loadData()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {               
        var res = xmlhttp.responseText;
        document.getElementById("respDiv").innerHTML=res;           
            }
    }
    xmlhttp.open("GET","loadPageData.php?loadLimit="+countScroll,true);
        xmlhttp.send();
   }

ステップ3]あなたのphpページ、つまりloadPageData.phpは...

    $loadLimit= $_GET['loadLimit'];
    $result = mysql_query("SELECT * FROM tableName limit $loadLimit");
    if(mysql_num_rows($result)>0)
    {
        while($row = mysql_fetch_array($result))
        {
        echo $yourVariable= $row['fieldName'];
          }
    }
于 2012-09-14T07:54:29.697 に答える
0

jQuery (またはお気に入りのライブラリ) を使用して、ユーザーがページの最後に到達したことを検出し、次の N 件の結果を得るためにサーバーへの AJAX 要求をトリガーします。

例えば：

JavaScript 部分:

var n = 0;

$(document).ready(function() {
    $(window).scroll(function() {
        if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
            $.ajax({
              url: "my_page.php",
                              data: {'n' : n},
              context: document.body
            }).done(function(data) { 
              n += 1;
              console.log(data); // <--- do stuff with received data here
            });
        }
    });
});

PHP 部分:

$n = $_POST['n'];
$n = 10 * $n;
$sql = "SELECT * FROM mytable LIMIT $n, 10";  // get 10 new entries each request.
于 2012-09-14T07:43:06.757 に答える
0

あなたの質問は一般的で、コードのスニペットで答えるのが難しいです。
これは疑似言語の解決策になる可能性があります

  • 次のようなクエリを実行して、デフォルトの要素数 (50 など) を取得します。SELECT * FROM yourTable WHERE ..... ORDER BY .... LIMIT 50
  • jQuery を使用してスクロール イベントを検出する
  • スクロール イベントを検出したら、AJAX 呼び出しを行います
  • 50 要素を再度取得する新しいクエリを作成しますが、今回はスクロールしたことを考慮します (したがって、デルタまたはオフセットを追加します)。
  • AJAX から返されたレンダリング要素
于 2012-09-14T07:45:18.090 に答える