Bootstrap 表单提交后 Spinner 不会停止并且 API 调用竞争

Question

我正在使用 bootstrap 并且我正在尝试在提交表单时设置微调器。我可以在提交表单时让微调器按钮旋转，但是在提交表单后它会一直旋转。我已经查看了所有内容，但似乎无法弄清楚如何在 API 调用完成后停止它。如何在提交表单时让它旋转，在 API 调用完成后停止，并在 API 调用完成后再次 return 返回可用按钮？

html代码

<form id="form_id" name="form_id" class="form_id" method="POST" >
    <div class="input-group-append">
        <button type="submit" id="btnFetch" class="btn btn-primary mb-2">Submit</button>
    </div>
</form>

JS代码

$(document).ready(function() {
    $("#btnFetch").click(function() {
        $(this).prop("disabled", true);
        $(this).html(
            `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...`
        );
    });
});

Ajax 通话

$(document).ready(function() {
    $('.form_class1').on('submit', function(event) {
        $.ajax({
            data : {
                some_id: $('#some_id').val(),
            },
            type : 'POST',
            url : '/ajax_request_url1'

        })
        .done(function(data) {

            if (data.error) {

            }
            else {
                // Do Processing here....
            }

        });

        event.preventDefault();
        event.stopImmediatePropagation();

    });

});

Answer 1

您可能会考虑重新组织一些事情以简化正在发生的事情。

创建单独的函数来处理微调器状态。

function startSpinner() {
    // your code to make the spinner start
    $("#btnFetch").prop("disabled", true);
    $("#btnFetch").html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...`
    );
}

function stopSpinner() {
    // you code to make the spinner stop
    // (i.e., return the button to its original state)
    $("#btnFetch").prop("disabled", false);
    $("#btnFetch").html('Submit');
}

在提交过程中的适当时间调用微调器函数。

$(document).ready(function() {
    $('.form_class1').on('submit', function(event) {

        // initiate spinner
        startSpinner();

        $.ajax({
            data : {
                some_id: $('#some_id').val(),
            },
            type : 'POST',
            url : '/ajax_request_url1'
        })
        .done(function(data) {
            // ...
        })
        .always(function(dataOrjqXHR, textStatus, jqXHRorErrorThrown) {           
            // do when complete, even on error            
            // stop the spinner
            stopSpinner();
        });

        // should these be at the top?
        event.preventDefault();
        event.stopImmediatePropagation();

    });

});

Bootstrap 表单提交后 Spinner 不会停止并且 API 调用竞争

Bootstrap Spinner wont stop after form submitted and API call compete

javascript

jquery

spinner

bootstrap-4

html代码

JS代码

Ajax 通话