使用jQuery和Ajax自動刷新DIV內容

本文演示瞭如何使用jQuery和ajax每5秒自動刷新DIV的內容。 該示例從RSS提要中獲取並顯示了最新的博客文章以及最後的刷新時間戳。 加載圖像在AJAX請求期間可選顯示。

>

密鑰概念：

• > ajax's.load()方法：提供了一種簡潔的方法來獲取和更新DIV的內容。
• ：setInterval()計劃重複函數調用以刷新數據。
• （可選）：>在全球配置AJAX設置，包括處理加載指示器。 $.ajaxSetup()>

演示：

演示展示了來自RSS feed的博客文章的實時更新，其中包括指示最後一個數據刷新的時間戳。 獲取新數據時顯示了加載GIF。 [查看演示]（未提供 - 提供的文本提到了演示，但不包含鏈接或圖像）

>

jquery和ajax代碼：

> 此代碼在AJAX請求（可選）期間使用

來管理加載圖像，然後使用

>最初填充每9秒鐘$.ajaxSetup()div.load()div（根據需要調整）。 #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數據腳本（

）：rss-feed-data.php> 此PHP腳本從RSS feed（

）中檢索數據，將其格式化為HTML <code> <p> </p>列表，並附加了當前日期和時間。 http://blogoola.com/blog/feed/ <ul></ul>完整的HTML結構：

<?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; ?>

這包括必要的div和加載圖像。

常見問題（常見問題解答）：

（原始常見問題解答部分被保留並稍微重新格式化。）本節回答了有關使用jQuery和ajax的自動重新恢復divs的常見問題。 （以簡潔而省略了答案，但原始內容提供了全面的答案）。

<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中文網其他相關文章！