在现代网站中，很多情况下我们需要展示一些数据并在后台执行异步请求。为了提高用户体验，我们需要在这个过程中展示一个加载图像。
本文将介绍如何同时展示加载图像和执行 AJAX 请求。我们将通过以下步骤来实现：
- 创建 HTML 结构
- 添加样式
- 编写 JavaScript 代码
- 测试
1. 创建 HTML 结构
首先，我们需要创建一个包含数据的容器，并在其中添加一个加载图像。HTML 结构如下：
<div id="container"> <img src="loading.gif" alt="Loading"> </div>
2. 添加样式
接下来，我们需要添加一些样式来使加载图像居中并覆盖数据容器。CSS 样式如下：
-- -------------------- ---- ------- ---------- - --------- --------- - ---------- --- - --------- --------- ---- ---- ----- ---- ---------- --------------- ------ -
这会使加载图像位于数据容器的中心位置。
3. 编写 JavaScript 代码
现在，我们需要编写 JavaScript 代码来执行 AJAX 请求并替换加载图像为数据结果。我们将使用 jQuery 库来简化代码。
$(function() {
$.ajax({
url: "data.json",
success: function(data) {
$("#container").html(data);
}
});
});我们使用 $.ajax() 方法执行 AJAX 请求，并在成功回调函数中将数据替换为数据容器的 HTML 内容。
4. 测试
最后，我们需要测试代码。我们可以使用以下 JSON 数据作为 data.json 文件：
{
"name": "John Doe",
"age": 30,
"email": "johndoe@example.com"
}当我们加载页面时，应该会看到加载图像出现，然后在 AJAX 请求完成后被替换为 JSON 数据。
结论
本文介绍了如何同时展示加载图像和执行 AJAX 请求。通过创建 HTML 结构、添加样式和编写 JavaScript 代码，我们可以提高用户体验并使网站更加动态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11817
