如何在ajax过程中显示加载动画和禁用按钮

<!-- 加载动画容器 -->
<div id="loading-container">
  <!-- 在此处添加加载动画的HTML结构和样式 -->
</div>

<!-- 按钮 -->
<button id="submit-btn">提交</button>

#loading-container {
  /* 添加加载动画容器的样式 */
}

/* 添加加载动画的样式 */

// 获取按钮元素
var btn = document.getElementById('submit-btn');

// 在Ajax请求开始前显示加载动画和禁用按钮
function showLoadingAnimation() {
  var loadingContainer = document.getElementById('loading-container');
  loadingContainer.style.display = 'block'; // 显示加载动画容器
  btn.disabled = true; // 禁用按钮
}

// 在Ajax请求完成后隐藏加载动画并恢复按钮状态
function hideLoadingAnimation() {
  var loadingContainer = document.getElementById('loading-container');
  loadingContainer.style.display = 'none'; // 隐藏加载动画容器
  btn.disabled = false; // 启用按钮
}

// 发起Ajax请求
function makeAjaxRequest() {
  // 显示加载动画和禁用按钮
  showLoadingAnimation();

  // 发起Ajax请求
  // ...

  // Ajax请求完成后隐藏加载动画并恢复按钮状态
  // ...
}