在 ajax 调用之前替换按钮，然后在调用后恢复

Question

我的网页上有一个按钮，生成如下：

<div class="btn2" id="btPost" onclick="$('#Delete').val('False'); ValidateFormAndAjaxSubmit('frmEditPost', this);" onmousedown="this.className='btn2_click';" onmouseout="this.className='btn2';" onmouseover="this.className='btn2_hover';" onmouseup="this.className='btn2_hover';">
 <span>Posta</span>
</div>

当我有这个JavaScript时：

function ValidateFormAndAjaxSubmit(formId, callingElement) {
    if (IsNotDblClick(callingElement.id)) {
        var _form = $("#" + formId);
        var validator = _form.validate();
        var anyError = false;
        anyError = !_form.valid();
        if (anyError) {
            window.latestClick = '';
            return false; // exit if any error found    
        }
        $.post(_form.attr("action"), _form.serialize(), function (data) {
            if (data.success && data.redirectUrl.length > 0) {
                window.location.href = data.redirectUrl;
            }
            else {
                var isValid = validateResponse(_form, data);
                window.latestClick = '';
            }
        })
    }
}

这工作正常，但问题是我想向最终用户显示表单正在加载。最好的解决方案可能是简单地从网页中删除callingElement，并将其替换为临时禁用（特殊CSS）按钮。按钮需要返回，然后 ajax 方法完成。

我知道这个：

$("#regTitle").html("Hello World");

但它只是替换了div 的内部部分，我还需要存储当前标记以便在 ajax 调用完成后能够返回。

如果范围内的文本也放在临时按钮上也会很好。

问题是我如何尽可能简单地做到这一点？

Answer 1

试试这个

$.ajax({
    'type': 'POST',
    'url': _form.attr("action"),
    'data': _form.serialize(),
    'beforeSend': function() {
        $('.btn2').hide();
        $('#regTitle').html('Loading ...');
        $('#regTitle').show();
    },
    'success': function() {
        $('.btn2').show();
        $('#regTitle').hide();
    },
    'error': function() {
        $('.btn2').show();
        $('#regTitle').html('Error ...');
    }
});

Answer 2

这就是我解决它的方式：

在波顿下生成额外的隐藏div，如下所示：

<div class="loadingDiv" id="loadingDiv_btPost"></div>

使用以下 CSS：

.loadingDiv {
    float:                  left;
    display:                none;
    height:                 26px;
    width:                  60px;
    background:             url("images/animations/ajaxLoader.gif") no-repeat;
    background-position:    center center;
}

然后像这样更改了javascript：

function ValidateFormAndAjaxSubmit(formId, callingElement) {
    if (IsNotDblClick(callingElement.id)) {
        var _form = $("#" + formId);
        var validator = _form.validate();
        var anyError = false;
        anyError = !_form.valid();
        if (anyError) {
            window.latestClick = '';
            return false; // exit if any error found    
        }
        $('#' + callingElement.id).hide();
        $('#loadingDiv_' + callingElement.id).show();
        $.post(_form.attr("action"), _form.serialize(), function (data) {
            $('#loadingDiv_' + callingElement.id).hide();
            $('#' + callingElement.id).show();
            if (data.success && data.redirectUrl.length > 0) {
                window.location.href = data.redirectUrl;
            }
            else {
                var isValid = validateResponse(_form, data);
                window.latestClick = '';
            }
        })
    }
}