4

メッセージを取り出し、PHP/MySQL で表示します。

ここで、10 個のリストのみを表示したいと思います。

そして、ボタンを追加したい。このボタンをクリックすると、スムーズに下にスライドし、さらに 10 件、合計 20 件のメッセージが表示されます。

ボタンをもう一度クリックすると、下にスライドして合計 30 件のメッセージが表示されます。

誰かjqueryでそれを行う方法を教えてもらえますか?

前もって感謝します。

4

3 に答える 3

3

私の最新のプロジェクトでは、スクロール可能なjQueryツールを使用して、リストに最新の20個のアイテムを表示しています（<ul><li>）。リストが最後のページにスクロールしたら、次の20個のアイテムをフェッチし、ビルドインjqueryツールAPIを使用してリストの最後に追加します。これは、AJAXリクエストが空の結果を返すまで続きます。これは、データベースにこれ以上リストがないことを示します。フラグとして変数を持っているので、それをfalseに設定したので、リストが最後のページにスクロールしたときにAJAXリクエストは発生しませんでした。

Twitterのホームページのように見えるかもしれませんが、リストが自動的に追加されるため、「more」リンクがありません。

残念ながら、現在プロジェクトはまだアルファ版であるため、ここでは表示できません。あなたはそれを試して、ここにあなたのコードを投稿することができます、そして私はあなたがそれを微調整するのを手伝います。

于 2010-01-16T12:37:54.547 に答える
3

原則として、新しく取得したすべてのメッセージを配置するコンテナーが必要です。

<div id="messages">
    <! -- message 1 -->
    <! -- message 2 -->
    <div id="newMessages">
    </div>
</div>

次に、fetch-more-method に接続できるボタン (またはアンカーなど) が必要です。

<input type="button" value="Fetch more messages" id="btnFetchMessages" />

DOMReady 内のどこかにフックアップを配置します。

var lastFetchedMessage = 0;

$('#btnFetchMessages').click(function() {
    $.ajax({
        url: '/getMessages.php',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: '{"lastId":'+lastFetchedMesasge+'"}',
        success: newMessagesReceived
});

ボタンをクリックすると、AJAX リクエストが送信され、それに基づいて 10 個ほどの次のメッセージが返さgetMessages.phpれます。lastFetchedMessageそのページから、関心のあるすべての情報を含むメッセージを含むJSON配列を返します。

AJAX リクエストが成功すると、関数newMessagesReceivedが呼び出されます。

function newMessagesReceived(result) {
    var container = $('#newMessages');

    for(var i = 0; i < result.length; i++) {
        var message = $('<div>' + result[i].body + '</div>');
        container.append(message);
    }

    var lastFetchedMessage = result[i].id;
}

上記は、少なくとも次のプロパティを持つメッセージを含む配列を返すことを前提としていbodyますid。

[ { "body": "new message1", "id": "10" }, { "body": "new message2", "id": "11" } ]
于 2010-01-16T11:15:04.840 に答える
0

表示されている行数などの状態情報を保持するには、javascript を使用します。

ajax 経由でデータを返す JS 関数をボタンで呼び出すようにします。ajax 呼び出しの結果は HTML であり、div タグに挿入できます。JS 関数は状態情報を更新する必要があり (毎回行数を増やすなど)、その状態情報を ajax 呼び出しに渡します。

ajax 呼び出しのターゲットは、MySQL クエリを実行し、返される HTML を生成する PHP スクリプトにすることができます。

于 2010-01-16T11:09:28.340 に答える