这篇“前端实现滑动按钮AJAX与后端交互的代码怎么写”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“前端实现滑动按钮AJAX与后端交互的代码怎么写”文章吧。
计算
安全
数据库
网络和加速
企业服务
<div class="switch-box">
<input id="switchButton" type="checkbox" class="switch" />
<label for="switchButton"></label>
</div>.switch-box {
width: 48px;
}
.switch-box .switch {
/* 隐藏checkbox默认样式 */
display: none;
}
.switch-box label {
/* 通过label扩大点击热区 */
position: relative;
display: block;
margin: 1px;
height: 28px;
cursor: pointer;
}
.switch-box label::before {
/* 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);
/* 通过transform、transition属性控制元素过渡进而形成css3动画 */
-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 {
/* 语义：被选中的类名为"switch"元素后面的label元素里的伪类元素，进行更改css样式 */
/* 形成伪类结构选择器：":"冒号加布尔值"checked" */
/* " Ele1 ~ Ele2 "波浪号在css的作用：连接的元素必须有相同的父元素，选择出现在Ele1后的Ele2（但不必跟在Ele1，也就是说可以并列） */
-webkit-transform: translateX(10px);
-moz-transform: translateX(10px);
transform: translateX(10px);
}
.switch-box label::after {
/* 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')" />input添加onclick事件，点击触发reverseStatus()函数
<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'在后端编写我们需要的逻辑
以上就是关于“前端实现滑动按钮AJAX与后端交互的代码怎么写”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
