如何在自定义.js中为WooCommerce Ajax邮箱检测添加加载Spinner？

嘿，很高兴听到那个邮箱检测的方案运行得很顺畅！给它加上加载Spinner来提示用户系统正在处理，其实分几步就能搞定，我给你详细说说：

1. 添加Spinner的HTML元素 #

首先，我们需要在结账页面的邮箱输入框附近添加Spinner的容器。推荐用WooCommerce的钩子来实现，这样不用直接修改模板文件：

add_action('woocommerce_after_checkout_billing_form', 'add_email_check_spinner');
function add_email_check_spinner() {
    // 创建一个默认隐藏的Spinner容器
    echo '<div class="email-check-spinner" style="display:none;">
            <div class="spinner"></div>
          </div>';
}

把这段代码加到你的主题functions.php文件里，或者自定义插件中就行。

2. 给Spinner添加CSS样式 #

接下来，我们需要给Spinner加上动画效果，让它看起来像加载状态。把这段CSS加到主题的style.css、自定义CSS面板，或者通过钩子注入：

/* Spinner容器样式，调整位置让它和邮箱输入框对齐 */
.email-check-spinner {
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
}

/* 核心Spinner动画样式 */
.spinner {
    border: 2px solid #e0e0e0; /* 浅色边框 */
    border-top: 2px solid #2196f3; /* 主题色边框，可根据你的网站调整 */
    border-radius: 50%;
    width: 18px;
    height: 18px;
    animation: spin 1s linear infinite;
}

/* 旋转动画关键帧 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

你可以修改颜色、大小这些参数，让Spinner和你的网站风格匹配。

3. 修改自定义JS文件，控制Spinner的显示/隐藏 #

最后，我们要在Ajax请求的生命周期里控制Spinner的显示和隐藏。假设你的原有JS代码是监听邮箱输入框的事件发起Ajax请求，现在需要添加beforeSend和complete回调：

jQuery(document).ready(function($) {
    // 监听邮箱输入框的blur事件（或者input事件，根据你的需求）
    $('#billing_email').on('blur', function() {
        var email = $(this).val().trim();
        
        // 只有当邮箱不为空时才发起请求
        if (email) {
            $.ajax({
                url: wc_checkout_params.ajax_url,
                type: 'POST',
                data: {
                    action: 'check_existing_email', // 对应你后台的Ajax动作名
                    email: email
                },
                // Ajax请求开始前：显示Spinner
                beforeSend: function() {
                    $('.email-check-spinner').show();
                },
                // Ajax请求完成后（不管成功/失败）：隐藏Spinner
                complete: function() {
                    $('.email-check-spinner').hide();
                },
                // 原有成功处理逻辑
                success: function(response) {
                    if (response && response.exists) {
                        // 比如显示邮箱已存在的提示
                        $('#email-check-message').text('这个邮箱已经注册过啦！').addClass('error').show();
                    } else {
                        $('#email-check-message').removeClass('error').hide();
                    }
                },
                // 原有错误处理逻辑
                error: function() {
                    $('#email-check-message').text('检测邮箱时出现错误，请重试').addClass('error').show();
                }
            });
        }
    });
});

关键说明： #

• beforeSend：在Ajax请求发送前触发，这里我们显示Spinner，告诉用户系统正在处理。
• complete：不管请求成功还是失败，只要请求完成就会触发，这里隐藏Spinner，避免一直显示加载状态。
• 如果你的原有JS已经有beforeSend或complete回调，只需要把Spinner的显示/隐藏代码加到现有回调里就行，不要覆盖原有逻辑。

这样一来，用户在输入邮箱并触发检测时，就能看到加载Spinner，体验会好很多！

内容的提问来源于stack exchange，提问作者Diego Saavedra