jQuery 定时循环请求示例
引言
在前端开发中，经常需要通过网络请求获取数据更新页面。一种常见的需求是每隔一定时间发送一个请求并更新页面内容。本文将介绍如何使用 jQuery 实现定时循环请求，并提供一个代码示例。
jQuery 简介
jQuery 是一个快速、小型、功能丰富且具有跨浏览器兼容性的 JavaScript 库。它使得操作 HTML 文档、处理事件、创建动画、处理 AJAX 请求等变得更加简单。
在使用 jQuery 之前，我们需要在 HTML 文档中引入 jQuery 库。可以通过以下方式引入最新版本的 jQuery：
<script src="
定时循环请求示例
下面的示例演示了如何使用 jQuery 定时循环请求数据并更新页面内容。假设我们需要每隔 1 秒钟从服务器获取最新的时间，并将其显示在页面上。
首先，我们需要在 HTML 中添加一个元素用于显示时间：
<p id="current-time"></p>
然后，我们可以使用以下 jQuery 代码来实现定时循环请求：
// 定时循环请求函数
function fetchTime() {
// 发送 AJAX 请求获取最新时间
$.ajax({
url: "/api/getTime", // 替换为实际的 API 地址
method: "GET",
success: function(data) {
// 更新页面上的时间显示
$("#current-time").text(data.time);
},
error: function(xhr, status, error) {
console.error("请求失败：" + status + "，" + error);
}
});
}
// 页面加载完成后开始定时循环请求
$(document).ready(function() {
// 首次立即发送请求
fetchTime();
// 每隔 1 秒发送一次请求
setInterval(fetchTime, 1000);
});
在上述代码中，我们首先定义了一个名为 fetchTime 的函数，用于发送 AJAX 请求并更新页面上的时间显示。然后，我们使用 $(document).ready() 函数来在页面加载完成后执行一些操作。在这里，我们立即发送第一次请求并通过 setInterval 函数每隔 1 秒发送一次请求。
在 $.ajax 函数中，我们指定了请求的 URL 和请求方法，并定义了成功和失败的回调函数。成功回调函数中，我们通过 $("#current-time").text(data.time) 更新页面上的时间显示。失败回调函数中，我们简单地在控制台打印出错误信息。
代码解析
让我们逐行解析上述代码，以便更好地理解它的工作原理。
首先，我们定义了一个名为 fetchTime 的函数，用于发送 AJAX 请求并更新页面上的时间显示。函数内的代码如下：
function fetchTime() {
$.ajax({
url: "/api/getTime",
method: "GET",
success: function(data) {
$("#current-time").text(data.time);
},
error: function(xhr, status, error) {
console.error("请求失败：" + status + "，" + error);
}
});
}
在函数内部，我们使用 $.ajax 函数发送一个 GET 请求到指定的 URL /api/getTime。这里的 URL 应该替换为实际的 API 地址。在请求成功时，回调函数将被调用，并将返回的数据作为参数传递给该函数。我们通过 $("#current-time").text(data.time) 将返回的时间数据更新到页面上的相应元素中。
如果请求失败，我们使用 console.error 在控制台输出错误信息。错误信息包括请求的状态码和错误消息。
接下来，我们使用 $(document).ready() 函数来在页面加载完成后执行一些操作。在这里，我们首先立即发送一次请求，然后使用 setInterval 函数每隔 1 秒发送一次请求。代码如下：
$(document).ready(function() {
fetchTime();
setInterval(fetchTime, 1000);
});
$(document).ready() 函数在页面的 DOM 加载完成后被触发。在这里，我们首先调用 fetchTime() 函数发送第一次请求，以便立即显示时间。
