在表单提交过程中，加载状态 和 提交中的加载动画 是提升用户体验的重要部分，能够让用户感知到系统正在处理请求并避免多次点击提交按钮。下面是如何在 表单 提交时添加 加载状态 和 加载动画 的几种常见方法。

1. 基本思路

  • 加载状态：在提交表单时，将按钮文本替换为“正在提交”或添加加载动画。
  • 禁用提交按钮：防止用户在提交过程中多次点击。
  • 加载动画：通常在按钮或其他页面元素中显示一个旋转的图标或进度条，表示请求正在处理中。

2. 实现方法：添加加载动画到提交按钮

HTML 结构

<form id="myForm">
  <input type="text" name="username" placeholder="Username" required>
  <input type="password" name="password" placeholder="Password" required>
  <button type="submit" id="submitBtn">Submit</button>
  <div id="loadingSpinner" style="display: none;">
    <img src="spinner.gif" alt="Loading...">
  </div>
</form>
  • submitBtn：表单的提交按钮。
  • loadingSpinner：加载动画（例如一个旋转的图片或图标）。

jQuery 实现

$(document).ready(function() {
  $('#myForm').on('submit', function(event) {
    event.preventDefault();  // 阻止默认表单提交

    // 显示加载动画，禁用提交按钮
    $('#submitBtn').prop('disabled', true);
    $('#loadingSpinner').show();

    // 模拟表单提交，假设是一个AJAX请求
    setTimeout(function() {
      // 假设AJAX请求完成后
      alert('Form submitted successfully!');
      
      // 提交完成后恢复按钮和隐藏加载动画
      $('#submitBtn').prop('disabled', false);
      $('#loadingSpinner').hide();

      // 也可以在此处执行表单数据的实际提交，如使用AJAX进行提交
    }, 3000);  // 模拟3秒的请求时间
  });
});

关键步骤说明：

  1. 在点击提交按钮时，禁用按钮，防止重复提交。
  2. 显示一个加载动画（例如，一个旋转的图片）。
  3. 通过 setTimeout() 或 AJAX 请求模拟提交过程，在完成后隐藏加载动画并恢复按钮。

3. 使用 CSS 实现加载动画

除了使用图片，还可以通过 CSS 创建加载动画。下面是一个旋转的圆圈动画：

HTML 结构

<form id="myForm">
  <input type="text" name="username" placeholder="Username" required>
  <input type="password" name="password" placeholder="Password" required>
  <button type="submit" id="submitBtn">Submit</button>
  <div id="loadingSpinner" class="spinner" style="display: none;"></div>
</form>

CSS 样式

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
  margin-left: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

jQuery 实现

$(document).ready(function() {
  $('#myForm').on('submit', function(event) {
    event.preventDefault();  // 阻止表单的默认提交行为

    // 显示加载动画，禁用提交按钮
    $('#submitBtn').prop('disabled', true);
    $('#loadingSpinner').show();

    // 模拟表单提交
    setTimeout(function() {
      // 模拟AJAX请求完成
      alert('Form submitted successfully!');

      // 隐藏加载动画并恢复按钮
      $('#submitBtn').prop('disabled', false);
      $('#loadingSpinner').hide();
    }, 3000);  // 模拟请求3秒
  });
});

4. 优化体验：逐步展示加载状态

除了在按钮上显示加载动画，还可以在表单的其他部分显示进度条或更新某些文本，来进一步增强用户体验。

示例：在表单顶部显示提交进度

<div id="formProgress" style="width: 100%; background: #f0f0f0; height: 5px; display: none;">
  <div id="progressBar" style="width: 0%; height: 100%; background: #3498db;"></div>
</div>
<form id="myForm">
  <input type="text" name="username" placeholder="Username" required>
  <input type="password" name="password" placeholder="Password" required>
  <button type="submit" id="submitBtn">Submit</button>
  <div id="loadingSpinner" class="spinner" style="display: none;"></div>
</form>

CSS 样式

#formProgress {
  margin-bottom: 10px;
}

#progressBar {
  height: 100%;
  background: #3498db;
}

jQuery 实现

$(document).ready(function() {
  $('#myForm').on('submit', function(event) {
    event.preventDefault();  // 阻止默认表单提交行为

    // 显示进度条和加载动画，禁用按钮
    $('#submitBtn').prop('disabled', true);
    $('#loadingSpinner').show();
    $('#formProgress').show();

    // 模拟表单提交
    let progress = 0;
    let progressInterval = setInterval(function() {
      progress += 10;
      $('#progressBar').css('width', progress + '%');

      if (progress === 100) {
        clearInterval(progressInterval);
        
        // 模拟提交完成
        setTimeout(function() {
          alert('Form submitted successfully!');
          $('#submitBtn').prop('disabled', false);
          $('#loadingSpinner').hide();
          $('#formProgress').hide();
        }, 500);  // 模拟提交后的延迟
      }
    }, 300);  // 每300毫秒更新一次进度条
  });
});

5. 通过 AJAX 实现提交并显示加载状态

如果你使用 AJAX 提交表单，可以在请求发送时显示加载状态，提交完成后隐藏加载状态。

示例：使用 AJAX 提交表单

<form id="myForm">
  <input type="text" name="username" placeholder="Username" required>
  <input type="password" name="password" placeholder="Password" required>
  <button type="submit" id="submitBtn">Submit</button>
  <div id="loadingSpinner" class="spinner" style="display: none;"></div>
</form>

$(document).ready(function() {
  $('#myForm').on('submit', function(event) {
    event.preventDefault();  // 阻止表单的默认提交行为

    // 显示加载动画，禁用提交按钮
    $('#submitBtn').prop('disabled', true);
    $('#loadingSpinner').show();

    // 使用 AJAX 提交表单数据
    $.ajax({
      url: '/submit-form',  // 假设的服务器端接口
      method: 'POST',
      data: $(this).serialize(),
      success: function(response) {
        alert('Form submitted successfully!');
      },
      error: function() {
        alert('There was an error submitting the form.');
      },
      complete: function() {
        // 请求完成后，恢复按钮和隐藏加载动画
        $('#submitBtn').prop('disabled', false);
        $('#loadingSpinner').hide();
      }
    });
  });
});

关键步骤说明：

  1. event.preventDefault()：阻止表单的默认提交行为。
  2. $.ajax()：使用 AJAX 请求提交表单数据。
  3. complete 回调：确保不论请求成功或失败，都能恢复按钮和隐藏加载动画。

总结

  1. 禁用提交按钮：防止用户在提交过程中重复点击提交按钮。
  2. 加载动画：使用 CSS 动画 或 GIF 图片 来显示加载状态。
  3. 进度条：通过逐步更新进度条的宽度，展示请求进度。
  4. AJAX 提交：如果表单数据需要通过 AJAX 提交，显示加载动画并处理提交的成功与失败。
  5. 清理状态：在请求完成后，恢复表单和按钮的初始状态，清除加载动画。

通过这些方法，你可以实现一个用户友好的加载状态和提交过程，提升用户体验。