jQuery、PHP、および mySQL を使用して、AJAX ベースの無限スクローラーを構築しようとしています。
非常に簡単です。通常のコンテンツ (#theContent) を保持するプライマリ ページに div があります。ウィンドウが一番下までスクロールされると、外部 PHP ページ (articles.php) への呼び出しが自動的に行われます。このページは、mySQL データベースを照会し、その新しい PHP コンテンツをプライマリ ページの div#theContent の末尾に追加します。これは、プライマリ ページから外部ページに渡されたオフセット変数を使用して、レコードセットに新しいコンテンツがある限り続きます。
部分的に機能していますが、オフセットに関するアドバイスを使用できます。以下のコード スニペット (プライマリ ページから) には、「articles.php?offset=10」が表示されます。ページが追加されるたびに (ページが一番下までスクロールされると)、「オフセット」値を増やしたいので、 .append(data) が呼び出されるたびにオフセット値が更新されること。これは私が立ち往生しているところです。
プライマリ ページの先頭 (このスクロールが機能し、データベースへの最初の呼び出しが実行されます):
<script>
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
$.get('articles.php?offset=10', function(data) {
$('#theContent').append(data);
});
}
});
</script>
article.php 内 (単独で動作)
$offset = $_GET["offset"]; // gets from primary page
the SQL call:
"Select blah from blah order by blah limit 50,$offset";
要約すると、.append が呼び出されるたびにプライマリ ページのオフセット変数をインクリメントするにはどうすればよいでしょうか。
読んでくれてありがとう。
編集: 私はスニペット fr Ohgodwhy を編集し、オフセット インクリメンタを $.get の外に移動しました。すばらしい - これで、同じレコードの問題がループしなくなりました。行われた編集:
var offset = 10;
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 200) {
$.get('articles.php?offset='+offset, function(data) {
$('#theContent').append(data);
});
offset += 10;
}
});