4

jQueryとPHPでスクリプトを作成する必要があります。このスクリプトは、load more newsロードするデータがまだページにない場合にのみボタンを表示します。最も簡単な解決策は、テーブルが更新されているかどうかをテストすることですが、それができるかどうかはわかりません。もう1つの方法は、現在ページにないコンテンツがテーブルにあるかどうかをテストすることですが、これを行う方法がわかりません。

これは私がこれまでに持っているものです。

//check for more data every 5 seconds
window.setInterval(function() {
    $.get("phpscripts/getFeed.php", function(result) {
        //fade in #refreshFeed
        $("#refreshFeed").fadeIn(300);
    }); 
}, 5000);

//Get feed on click
$("#refreshFeed").live('click', function() {
    $.get("phpscripts/getFeed.php", function(result) {
        $("#newsFeed").html(result);
    }); 
});

これにより、5秒後にボタンが表示され、ロードするデータがまだあるかどうかはテストされません。2番目の関数のphpスクリプトは、テーブルからデータをロードするだけです。

現時点で関数で同じスクリプトを使用し、すべてをjQueryで実行する方法があることを願っています。

一例として、誰かがTwitterやiPhone用の新しいFacebookアプリを利用したことがある場合、概念はまったく同じです。データベースに新しい情報がある場合、クリックするとそのデータをフィードの上部にロードするボタンが表示されます。FacebookとTwitterはSSEを使用すると確信していますが、その必要はありません。私がする必要があるのは、5秒ごとに新しいデータをチェックすることです。

4

2 に答える 2

2

サイトでさらに2つのリンク機能を表示し終えたところです。パフォーマンステストから、すべてのデータを読み込み、ページ読み込み時にDOMに追加するのが最善の策であることがわかりますdisplay: none。jQueryセレクターを使用して、これらすべての要素を取得し、コレクションを変数に格納します。次に、これらの要素のビューのスクリプトを増やす/減らすことができます。

スクリプトについてサポートが必要な場合はお知らせください。喜んでサポートさせていただきます。幸運を！:)


編集：

私はあなたの質問の一部（ボタンをいつ非表示または表示するかを知る方法）を見逃したかもしれないと思います。表示するアイテムの数を保存するために使用する変数を保持し、表示するアイテムの数を増やしたり減らしたりする必要があります。または（ただしオーバーヘッドが大きくなります）、クラスをフラグとして使用して、表示される要素と表示されない要素を判別できます。

于 2012-09-01T15:44:29.263 に答える
1

まず第一に、これを達成することができるいくつかの方法があります。すべてのデータを一度にロードし、jQueryで表示する内容を操作できます。または、サーバーから徐々にデータを取得することもできます。これについては、以下で方法を提案します（前者の方がパフォーマンスが向上する可能性があります）。また、jQueryを使用してデータを徐々にロードすると、SEOに影響します。

質問へのコメントで書いたように、JSONを使用してPHPからjQueryにデータを返し、フェッチするデータがまだあるかどうかを示す変数を含めることができます。次に、この変数をチェックして、「続きを読む」リンクを表示する必要があるかどうかを確認できます。まず、サーバー側のことを見てみましょう。

データをどのように「分割」するかはわかりませんが、簡単にするために、500文字後にテキストが切り取られ、その後さらに500文字が読み込まれると仮定します。

const LOAD_PER_REQUEST = 500; // Load 500 characters per request

$text = 'Lorem ipsum...'; // Fetched from database
$requestNumber = (isset($_POST['requestNumber'])) ? ((int)$_POST['requestNumber']) : 0; // Use to calculate which data to return to jQuery

// Calculate & generate data to return to jQuery
$start = ($requestNumber * LOAD_PER_REQUEST);
$length = ($start - ($start + LOAD_PER_REQUEST));
$newText = substr($text, $start, $length);

$data = array(
    'text' => $newText,
    'hasMoreData' => (strlen($text) > ($start + LOAD_PER_REQUEST)) // If $text length is longer than where we cut off
);

echo json_encode($data);

jQueryでは、次のようにしてデータをフェッチできます。

$(function() {
    var requestNumber = 1; // Assuming that initial data is placed on the page with PHP

    $('#refreshFeed').on('click', function(){
        // Get more data
        $.ajax({
            type: 'POST',
            url: 'phpscripts/getFeed.php',
            dataType: 'json',
            data: 'requestNumber=' + requestNumber,

            success: function(result) {
                if (result.hasMoreData) {
                    // There is more data; show "read more"
                    $('#refreshFeed').show();
                }

                else {
                    // No more data; hide "read more"
                    $('#refreshFeed').hide();
                }

                requestNumber++;
            }
        });
    });
});

私はこのコードをテストしませんでしたが、あなたが私の考えを理解してくれることを願っています。

于 2012-09-01T17:21:46.337 に答える