使用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中文网其他相关文章！