Javascript & HTML5 使用Ajax自动更新页面数据

最新推荐文章于 2025-06-17 17:33:58 发布

willproud

最新推荐文章于 2025-06-17 17:33:58 发布

阅读量7.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：网页 Javascript

本文链接：https://blog.youkuaiyun.com/willyang519/article/details/26396331

本文介绍了如何利用JavaScript和HTML5的Ajax技术，设置定时interval，实现页面数据的自动更新。通过编写一个通用函数，可以方便地应用到多个数据更新场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过设置interval和ajax，来实现页面数据的更新，亮点是只用写一个函数，即可实现所有需要更新的数据的更新。

javascript：

var auto_refresh_interval = undefined;
var auto_refresh = $('[data-refresh="auto"]');
startAutoRefreshInterval();

function startAutoRefreshInterval()
{
  if (auto_refresh.length > 0)
  {
    console.log('starting auto refresh interval');
    auto_refresh_interval = window.setInterval(function(){
      console.log('refreshing data');
      $.ajax({
        url: '',
        success: function( data ) {
          for (var i=auto_refresh.length-1; i>=0; i--)
          {
            var id = '#' + auto_refresh[i].id;
            console.log(id);
            $(id).html($(data).find(id).html());
          }
        }
      });
    }, 1000);
  }
}

in the view: 将下面的代码加到合适的地方即可，比如我是在更新表格里的数据：

<tbody id=request_list" data-refresh="auto">
...
</tbody>

最低0.47元/天解锁文章

200万优质内容无限畅学