AJAX 调用正在进行时显示“正在加载”图像

Ajax

使用Ajax实现正在加载效果的方法

在Web开发中，通过Ajax（Asynchronous JavaScript and XML）进行异步数据交互已经成为一种常见的技术。当用户与页面交互时，特别是在数据加载或请求期间，为了提供更好的用户体验，我们经常需要显示一个“正在加载”的提示，让用户知道系统正在进行操作。

实现思路

要在Ajax调用进行时显示“正在加载”图像，我们可以使用以下步骤：

1. 创建加载图像：首先，我们需要准备一个用于表示加载状态的图像。这可以是一个旋转的加载动画或简单的加载图标。

2. 显示加载图像：在Ajax调用开始时，我们将加载图像显示在用户界面上。这可以通过在页面中添加一个具有“正在加载”图像的元素，或者在页面上覆盖一个全屏的遮罩来实现。

3. 隐藏加载图像：一旦Ajax调用完成，我们需要隐藏加载图像，以便用户可以看到请求的结果。这可以通过将加载图像的显示属性设置为“none”或者移除加载图像元素来实现。

案例代码

下面是一个使用jQuery库的简单案例代码，演示了如何在Ajax调用期间显示和隐藏加载图像：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Loading Example</title>
    <script src="JS">https://code.jquery.com/jquery-3.6.4.min.JS</a>"></script>
    <style>
        #loading {
            display: none;
            /* 样式：设置加载图像的样式，例如旋转动画或加载图标 */
        }
    </style>
</head>
<body>
<!-- 加载图像元素 -->
<div id="loading">正在加载...</div>
<!-- 页面内容 -->
<div>
    <!-- 这里放置其他页面元素 -->
    <button id="loadDataBtn">加载数据</button>
    <div id="result"></div>
</div>
<script>
    // Ajax调用开始时显示加载图像
    $(document).AjaxStart(function () {
        $("#loading").show();
    });
    // Ajax调用完成时隐藏加载图像
    $(document).AjaxStop(function () {
        $("#loading").hide();
    });
    // 模拟一个简单的Ajax调用
    $("#loadDataBtn").click(function () {
        $.Ajax({
            url: "https://JSonplaceholder.typicode.com/todos/1",
            method: "GET",
            success: function (data) {
                // 将结果显示在页面上
                $("#result").html(JSON.stringify(data));
            },
            error: function () {
                // 处理错误情况
                $("#result").html("发生错误");
            }
        });
    });
</script>
</body>
</html>

在这个例子中，当用户点击“加载数据”按钮时，页面会发起一个模拟的Ajax调用，期间显示“正在加载”图像。一旦Ajax调用完成，加载图像将被隐藏，并将请求的结果显示在页面上。

通过这种方式，我们可以优雅地处理Ajax调用期间的加载状态，提高用户体验。