SpringBoot使用thymeleaf引擎，实现switch开关的ajax异步控制。

1下面是一个switch开关
<span class="mui-badge ">
<div class="mui-switch" id="mySwitch1" data-off="关" data-on="开">
<div class="mui-switch-handle"></div>
</div>
</span>

2.对此开关的开关，会发出ajax请求。开关会先改变状态，ajax请求成功后后有弹框显示开关成功打开，请求失败后开关自动关闭

<script th:inline="javascript">
    /*<![CDATA[*
    document.getElementById("mySwitch1").addEventListener("toggle", function (event) {
        if (event.detail.isActive) {
            $.ajax({
                type: "GET",
                url: "/sell/open/msg",
                data: {//data就是参数，是json格式
                    openid: openid
                },
                async: true,
                dataType: 'json',
                cache: false,
                success: function (data) {
                        if(data==200){
                            alert("增氧机已打开");
                        }else{
                            $("#mySwitch1").removeClass("mui-switch mui-active").addClass("mui-switch");
                            //alert(data);
                            alert("增氧机打开失败,请检查设备是否离线！");
                        }
                },
                error: function () {
                    $("#mySwitch1").removeClass("mui-switch mui-active").addClass("mui-switch");
                    alert("增氧机打开失败,请检查设备是否离线！");
                }
            });
        } else {
            $.ajax({
                type: "GET",
                url: "/sell/open/msg",
                data: {//data就是参数，是json格式
                    type: "off",
                    mac: mac,
                    openid: openid
                },
                async: true,
                dataType: 'json',
                cache: false,
                success: function (data) {
                    if(data==200){
                        alert("增氧机已关闭");
                    }else{
                        //alert(data);
                        $("#mySwitch1").removeClass("mui-switch").addClass("mui-switch mui-active");
                        alert("增氧机关闭失败,请检查设备是否离线！");
                    }
                },
                error: function () {
                    $("#mySwitch1").removeClass("mui-switch").addClass("mui-switch mui-active");
                    alert("增氧机关闭失败,请检查设备是否离线！");
                }
            });
        }
    })
    /*]]>*/
</script>

3.在js里可以这样控制switch开关的状态

$("#mySwitch2").removeClass("mui-switch").addClass("mui-switch mui-active");

移除关闭状态，到开启状态