使用jQuery为表单提交按钮添加加载状态的通用函数实现-js教程-PHP中文网

使用jQuery为表单提交按钮添加加载状态的通用函数实现

花韻仙語

发布： 2025-10-10 13:54:05

原创

769人浏览过

使用jQuery为表单提交按钮添加加载状态的通用函数实现

本教程将指导您如何使用jQuery和Font Awesome创建一个可复用的JavaScript函数，用于在表单提交时为按钮显示加载动画并禁用按钮，从而提升用户体验。文章将详细介绍HTML结构、CSS样式以及JavaScript的实现逻辑，并提供示例代码和使用注意事项。

在现代web应用中，当用户提交表单时，提供即时反馈至关重要。一个常见的做法是在提交按钮上显示加载动画并禁用按钮，以防止重复提交，并告知用户操作正在进行。本文将详细介绍如何利用jquery和font awesome实现一个可复用的加载按钮功能。

1. 核心加载函数 toggleLoader

我们首先定义一个核心的JavaScript函数 toggleLoader，它负责控制按钮的加载状态。这个函数接受一个布尔值参数 show，根据其值来显示或隐藏加载图标并启用/禁用按钮。

/**
 * 切换按钮的加载状态。
 * @param {boolean} show - true 表示显示加载动画并禁用按钮，false 表示隐藏加载动画并启用按钮。
 */
const toggleLoader = show => {
  // 选取所有具有 .btn-sabt 类的按钮
  $('.btn-sabt')
    .prop('disabled', show) // 根据 show 的值禁用或启用按钮
    .find('i')             // 查找按钮内部的 <i> 标签（加载图标）
    .toggleClass('hide', !show); // 根据 show 的值切换 'hide' 类来显示或隐藏图标
};

登录后复制

函数解析：

$('.btn-sabt')：使用jQuery选择器选中页面上所有类名为 btn-sabt 的按钮。
.prop('disabled', show)：prop() 方法用于设置或获取元素的属性。当 show 为 true 时，按钮的 disabled 属性被设置为 true，按钮被禁用；当 show 为 false 时，disabled 属性被设置为 false，按钮被启用。
.find('i')：在选中的按钮内部查找 <i> 标签，这个标签将用于显示加载图标。
.toggleClass('hide', !show)：toggleClass() 方法根据第二个参数的布尔值来添加或移除类。当 show 为 true 时（表示显示加载），!show 为 false，hide 类被移除，图标显示。当 show 为 false 时（表示隐藏加载），!show 为 true，hide 类被添加，图标隐藏。

2. HTML 结构准备

为了使 toggleLoader 函数生效，我们的提交按钮需要包含一个用于显示加载动画的 <i> 标签。我们使用 Font Awesome 图标库来提供加载图标。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<form id="MobileUserForm" method="post">
  <div class="form-group">
    <label for="Mobile">手机号</label>
    <input id="Mobile" type="number" class="form-control" />
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-sabt">
       <i class="fa fa-refresh fa-spin hide"></i> 保存
    </button>
  </div>
</form>

登录后复制

HTML 结构解析：

依赖引入： 引入 jQuery 库和 Font Awesome CSS。
按钮元素： <button type="submit" class="btn btn-primary btn-sabt"> 定义了一个提交按钮。btn-sabt 类是 toggleLoader 函数中用于选择按钮的关键。
加载图标： <i class="fa fa-refresh fa-spin hide"></i> 是 Font Awesome 的旋转刷新图标。
- fa fa-refresh：指定刷新图标。
- fa-spin：使图标旋转，形成加载动画效果。
- hide：初始状态下，加载图标是隐藏的。 这个 hide 类将在 CSS 中定义。

3. CSS 样式定义

我们需要一个简单的 CSS 规则来控制 hide 类的显示/隐藏。

.hide {
  display: none !important;
}

登录后复制

CSS 解析：

当元素应用了 hide 类时，display: none !important; 会强制其不显示。!important 确保这个规则的优先级最高，避免被其他样式覆盖。

4. JavaScript 事件处理

现在，我们将 toggleLoader 函数与表单的提交事件关联起来。

$(function() {
  // 当 DOM 完全加载后执行
  $('#MobileUserForm').on('submit', (event) => {
    event.preventDefault(); // 阻止表单的默认提交行为

    toggleLoader(true);  // 显示加载动画并禁用按钮

    // 在此处执行实际的表单提交或异步操作
    // 例如：通过 AJAX 发送数据到服务器

    // 模拟一个异步操作（例如 AJAX 请求），持续 3 秒
    // 在实际应用中，请移除 setTimeout，并在异步操作完成后调用 toggleLoader(false)
    setTimeout(() => {
      toggleLoader(false); // 隐藏加载动画并启用按钮
      alert('表单提交模拟完成！'); // 仅作演示
      // 可以在此处执行表单成功提交后的逻辑，例如重定向或更新UI
    }, 3000);
  });
});

登录后复制

事件处理解析：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

$(function() { ... });：这是 jQuery 的简写形式，确保在 DOM 加载完成后执行代码。
$('#MobileUserForm').on('submit', (event) => { ... });：为 ID 为 MobileUserForm 的表单绑定 submit 事件监听器。当表单被提交时，回调函数会执行。
event.preventDefault();：这是关键一步，它阻止了浏览器默认的表单提交行为（例如页面刷新），允许我们通过 JavaScript 控制提交过程。
toggleLoader(true);：在表单处理开始时调用，显示加载图标并禁用按钮。
异步操作： 注释部分是您实际进行数据提交（如 AJAX 请求）的地方。这是一个异步过程。
setTimeout(() => { ... }, 3000);：这是一个模拟异步操作的示例。在实际应用中，您应该将 toggleLoader(false); 放在您的 AJAX 请求的 success 或 complete 回调函数中。
toggleLoader(false);：在异步操作完成后调用，隐藏加载图标并重新启用按钮。

5. 注意事项与通用性扩展

异步操作： 表单提交通常涉及网络请求，这是一个异步过程。务必在异步请求（如 AJAX）的 success、error 或 complete 回调函数中调用 toggleLoader(false)，以确保无论成功或失败，按钮都能恢复正常状态。
错误处理： 如果异步提交失败，同样需要调用 toggleLoader(false) 来恢复按钮，并可能显示错误信息。

通用性： 当前的 toggleLoader 函数内部使用了 $('.btn-sabt') 这个硬编码的选择器。如果您的不同表单使用不同的按钮类名，您可以对 toggleLoader 函数进行修改，使其接受一个选择器作为参数，从而增强其通用性：

/**
 * 更通用的切换按钮加载状态函数。
 * @param {string} buttonSelector - 目标按钮的 jQuery 选择器字符串。
 * @param {boolean} show - true 表示显示加载动画并禁用按钮，false 表示隐藏加载动画并启用按钮。
 */
const toggleGenericLoader = (buttonSelector, show) => {
  $(buttonSelector)
    .prop('disabled', show)
    .find('i')
    .toggleClass('hide', !show);
};

// 使用示例：
// toggleGenericLoader('#MobileUserForm .btn-sabt', true);
// toggleGenericLoader('#AnotherForm .submit-button', false);

登录后复制

CSS 定制： 您可以根据需要修改 Font Awesome 图标（例如 fa-spinner、fa-circle-o-notch 等）或调整图标的颜色、大小等样式。
用户体验： 确保加载动画的显示时间不要过短或过长。对于非常快速的操作，有时加载动画可能一闪而过，反而会分散用户注意力。