jQuery - 每 10 秒调用一次 ajax

Ajax

使用jQuery编写的前端框架，能够快速简便地完成各种交互效果和网络请求。在开发过程中，经常会遇到需要每隔一定时间自动调用Ajax请求的场景。本文将介绍如何使用jQuery每10秒调用一次Ajax，并提供相应的案例代码。

在前端开发中，有时候我们需要定时向服务器请求数据并更新页面。比如，在一个即时聊天应用中，我们需要每隔一段时间获取最新的聊天记录。这时，我们可以使用jQuery提供的定时器函数setInterval来实现。

首先，我们需要引入jQuery库。可以通过以下方式在HTML文件中引入：

<script src="JSdelivr.net/jquery/3.5.1/jquery.min.JS">https://cdn.JSdelivr.net/jquery/3.5.1/jquery.min.JS</a>"></script>

接下来，我们可以编写一个自定义的函数，用于发送Ajax请求并处理返回的数据。假设我们要向服务器请求最新的新闻列表，并将返回的数据展示在页面上。

Javascript
function getNews() {
  $.Ajax({
    url: 'https://api.example.com/news',
    method: 'GET',
    success: function(response) {
      // 处理返回的数据
      // 更新页面
    },
    error: function(error) {
      // 处理请求失败的情况
    }
  });
}

在这个例子中，我们使用了jQuery的Ajax函数来发送GET请求，并通过success回调函数处理返回的数据。在success回调函数中，我们可以根据返回的数据更新页面。

接下来，我们可以使用setInterval函数来定时调用getNews函数，并指定时间间隔为10秒。

Javascript
setInterval(getNews, 10000);

这样，每隔10秒，getNews函数就会被自动调用一次，从而实现了每10秒调用一次Ajax请求的效果。

案例代码

html
<!DOCTYPE html>
<html>
<head>
  <title>每10秒调用一次Ajax</title>
  <script src="JSdelivr.net/jquery/3.5.1/jquery.min.JS">https://cdn.JSdelivr.net/jquery/3.5.1/jquery.min.JS</a>"></script>
</head>
<body>
  <h1>最新新闻列表</h1>
  <ul id="news-list"></ul>
  <script>
    function getNews() {
      $.Ajax({
        url: 'https://api.example.com/news',
        method: 'GET',
        success: function(response) {
          // 处理返回的数据
          // 更新页面
          var newsList = $('#news-list');
          newsList.empty();
          $.each(response, function(index, news) {
            newsList.append('<li>' + news.title + '</li>');
          });
        },
        error: function(error) {
          // 处理请求失败的情况
          console.log('请求失败');
        }
      });
    }
    setInterval(getNews, 10000);
  </script>
</body>
</html>

在这个案例中，我们通过Ajax请求获取最新的新闻列表，并将标题展示在页面上的一个无序列表中。每隔10秒，页面会自动更新一次，显示最新的新闻列表。

使用jQuery每10秒调用一次Ajax请求是一个常见的前端开发需求。通过使用setInterval函数和Ajax函数，我们可以轻松地实现这一功能。在实际项目中，我们可以根据具体的需求来定制Ajax请求和页面更新的逻辑，从而实现更加复杂和丰富的功能。