jqueryとajaxを使用した自動更新Divコンテンツ

この記事では、jqueryとajaxを使用して5秒ごとにDivのコンテンツを自動的に更新する方法を示しています。 この例は、RSSフィードからの最新のブログ投稿と、最後の更新タイムスタンプを取得して表示します。 ajaxリクエスト中にロード画像がオプションで表示されます。

重要な概念：<strong></strong>

• ajaxのメソッド：.load()Divのコンテンツを取得して更新するための簡潔な方法を提供します。
• ：データを更新するための繰り返しの関数呼び出しをスケジュールします。 setInterval()
（オプション）：
• ロードインジケーターの処理を含むAjax設定をグローバルに構成します。 $.ajaxSetup()デモ：

デモでは、最後のデータリフレッシュを示すタイムスタンプを含む、RSSフィードからのブログ投稿のライブアップデートを紹介します。 新しいデータの取得中にロードGIFが表示されます。 [デモを表示]（提供されていない - 提供されたテキストにはデモが言及されていますが、リンクや画像は含まれていません）

jquery and ajaxコード：

このコードは、

を使用してAjaxリクエスト中にロード画像を管理し（オプション）、を使用して最初に入力して9秒ごとに

Divを更新します（必要に応じて調整します）。

$.ajaxSetup() .load()#content

(function($) {
    $(document).ready(function() {
        $.ajaxSetup({
            cache: false,
            beforeSend: function() {
                $('#content').hide();
                $('#loading').show();
            },
            complete: function() {
                $('#loading').hide();
                $('#content').show();
            },
            success: function() {
                $('#loading').hide();
                $('#content').show();
            }
        });
        var $container = $("#content");
        $container.load("rss-feed-data.php");
        var refreshId = setInterval(function() {
            $container.load('rss-feed-data.php');
        }, 9000); // Refresh every 9 seconds
    });
})(jQuery);

phpデータスクリプト（

）：

このPHPスクリプトは、RSSフィード（

）からデータを取得し、HTML <strong></strong>リストにフォーマットし、現在の日付と時刻を追加します。 rss-feed-data.php

完全なhtml構造：

http://blogoola.com/blog/feed/ <ul></ul>これには、必要なdivと荷重画像が含まれます。

<?php $feed_url = 'http://blogoola.com/blog/feed/';
$content = file_get_contents($feed_url);
$x = new SimpleXmlElement($content);
$feedData = '';
$date = date("Y-m-d H:i:s");

$feedData .= "<ul>";
foreach ($x->channel->item as $entry) {
    $feedData .= "

" . $entry->title . "

"; } $feedData .= ""; $feedData .= "

Data current as at: " . $date . "

"; echo $feedData; ?>

よくある質問（FAQS）：（元のFAQSセクションが保持され、明確になるためにわずかに再フォーマットされています。）このセクションは、jQueryとajaxを使用して自動再洗浄Divについての一般的な質問に答えます。 （回答は簡潔に省略されていますが、元のコンテンツは包括的な回答を提供します）

この改訂された出力は、読みやすさと構造を改善しながら、元の情報を維持します。 画像を含めたい場合は、

および

<title>Auto Refresh Div Content Demo | jQuery4u</title>


<div id="wrapper">
    <div id="content"></div>
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136669518374.gif?x-oss-process=image/resize,p_40" class="lazy" alt="Auto Refresh Div Content Using jQuery and AJAX ">
</div>

を実際の画像URLに置き換えることを忘れないでください。

以上がjqueryとajaxを使用した自動更新Divコンテンツの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。