如何在按钮上启动Bootstrap微调器，并在数据返回到AJAX时恢复到原始状态？

要在按钮上启动Bootstrap微调器并在数据返回到AJAX时恢复到原始状态，你需要结合Bootstrap微调器的使用和AJAX请求的处理。以下是实现这一功能的步骤：

基础概念

Bootstrap微调器：Bootstrap微调器是一个用于选择数字值的组件，它提供了一个简单的方式来增加或减少数值。
AJAX：Asynchronous JavaScript and XML，一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

实现步骤

HTML结构：创建一个按钮和一个隐藏的输入框用于存储微调器的值。

<button id="myButton" data-toggle="spinner" data-target="#mySpinner">启动微调器</button>
<input id="mySpinner" class="spinner-border text-center" type="number" value="0" style="display:none;">

JavaScript/jQuery代码：编写JavaScript代码来处理按钮点击事件，启动微调器，并在AJAX请求完成后恢复原始值。

$(document).ready(function() {
    var originalValue = $('#mySpinner').val(); // 保存原始值

    $('#myButton').click(function() {
        $('#mySpinner').spinner('toggle'); // 启动微调器
    });

    $('#mySpinner').on('change', function() {
        var newValue = $(this).val(); // 获取微调器的新值
        // 发起AJAX请求
        $.ajax({
            url: 'your-endpoint', // 替换为你的后端API地址
            type: 'POST',
            data: { value: newValue },
            success: function(response) {
                // 处理响应数据
                console.log(response);
                // 恢复原始值
                $('#mySpinner').val(originalValue);
                $('#mySpinner').spinner('refresh'); // 刷新微调器显示
            },
            error: function(xhr, status, error) {
                // 处理错误
                console.error(error);
                // 恢复原始值
                $('#mySpinner').val(originalValue);
                $('#mySpinner').spinner('refresh'); // 刷新微调器显示
            }
        });
    });
});