bootstrap 中loading模态框使用示例

克里斯蒂亚诺更新

于 2024-03-18 10:15:40 发布

阅读量549

点赞数 1

分类专栏： css 文章标签： bootstrap 前端

本文链接：https://blog.csdn.net/weixin_36152801/article/details/136801427

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

你可以通过在发送 AJAX 请求之前显示加载状态，然后在 AJAX 请求成功后隐藏加载状态来实现这个功能。以下是一个基本的示例代码：

<!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>
  <!-- 引入 Bootstrap CSS 文件 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- 加载状态 -->
<div class="modal" id="loadingModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body text-center">
        <div class="spinner-border text-primary" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
        <p>Loading...</p>
      </div>
    </div>
  </div>
</div>

<button id="ajaxButton" class="btn btn-primary">Send AJAX Request</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // 当按钮被点击时发送 AJAX 请求
  $('#ajaxButton').click(function() {
    // 显示加载状态
    $('#loadingModal').modal('show');

    // 发送 AJAX 请求
    $.ajax({
      url: 'your_api_endpoint',
      method: 'GET',
      success: function(data) {
        // 请求成功后隐藏加载状态
        $('#loadingModal').modal('hide');
        // 处理返回的数据
        console.log('Ajax response:', data);
      },
      error: function(xhr, status, error) {
        // 请求失败后隐藏加载状态
        $('#loadingModal').modal('hide');
        // 处理错误
        console.error('Ajax error:', status, error);
      }
    });
  });
</script>

</body>
</html>