如何在表单提交的Ajax请求中添加加载器？

步骤1：添加加载状态的HTML元素（两种可选方式） #

可以直接修改提交按钮文本，也可以添加独立的加载提示容器：

• 方式一：基于提交按钮修改

<!-- 假设你的表单提交按钮结构如下 -->
<button type="submit" class="submit-btn">提交</button>

• 方式二：新增加载提示容器

<div class="loading-indicator" style="display:none;">提交中，请稍候...</div>

步骤2：优化并修改jQuery代码 #

注意：你原代码里发起了两次AJAX请求（jQuery.post和jQuery.ajax），属于冗余操作会导致重复提交，先合并为单次请求，再加入加载状态逻辑：

jQuery(document).ready(function($) {
    $('.mts-edit-account').on('submit', function(e) {
        e.preventDefault();
        var $form = $(this);
        // 获取操作元素（根据你选的HTML方式调整）
        var $submitBtn = $form.find('button[type="submit"]');
        var originalBtnText = $submitBtn.text();
        var $loadingIndicator = $('.loading-indicator');

        // 开启加载状态：禁用按钮+修改文本/显示提示
        $submitBtn.prop('disabled', true).text('提交中...');
        $loadingIndicator.show();

        // 发起单次AJAX请求
        $.ajax({
            type: "POST",
            url: $form.attr('action'),
            data: $form.serialize(),
            dataType: 'json',
            success: function(data) {
                // 处理返回的提示信息
                $('.newdiv').html(data);
            },
            error: function() {
                // 可选：处理请求失败场景
                $('.newdiv').html('<p>提交失败，请稍后重试</p>');
            },
            complete: function() {
                // 请求完成（无论成功/失败），恢复初始状态
                $submitBtn.prop('disabled', false).text(originalBtnText);
                $loadingIndicator.hide();
            }
        });
    });
});

关键逻辑说明 #

• 提交时触发加载状态：AJAX请求发起前，禁用提交按钮防止重复点击，同时修改按钮文本或显示加载提示，让用户感知到提交正在处理。
• 请求完成后恢复状态：通过complete回调（请求成功/失败都会执行），将按钮和提示恢复到初始状态，避免用户无法再次操作。
• 合并冗余请求：原代码的两次AJAX请求会导致表单数据重复提交，合并为单次请求即可解决这个问题。

可选：用CSS美化加载效果 #

如果需要更直观的加载动画，可以添加以下CSS：

.loading-indicator {
    color: #555;
    font-style: italic;
    margin-top: 8px;
}

.submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

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