前端实现滑动按钮AJAX与后端交互的示例代码

<div class="switch-box">
    <input id="switchButton" type="checkbox" class="switch" />
    <label for="switchButton"></label>
</div>

.switch-box {
    width: 48px;
}
.switch-box .switch {
    
    display: none;
}
.switch-box label {
    
    position: relative;
    display: block;
    margin: 1px;
    height: 28px;
    cursor: pointer;
}
.switch-box label::before {
    
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -14px;
    width: 26px;
    height: 26px;
    border-radius: 100%;
    background-color: #fff;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.06);
    
    -WEBkit-transfORM: translateX(-9px);
    -moz-transform: translateX(-9px);
    transform: translateX(-9px);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.switch-box .switch:checked~label::before {
    
    
    
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    transform: translateX(10px);
}
.switch-box label::after {
    
    content: "";
    display: block;
    border-radius: 30px;
    height: 28px;
    background-color: #dcdfe6;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.switch-box .switch:checked~label::after {
    background-color: #13ce66;
}

<input id="switchButton" type="checkbox" class="switch" onclick="reverseStatus('1')" />

<script>
	function reverseStatus(id){
		$.get("/pocs/reverse/"+id);
	}
</script>

@poc.route('/pocs/reverse/<int:id>', methods=['GET'])
def reverse(id=None):
    print(id)
    return 'success'