这篇“前端实现滑动按钮AJAX与后端交互的代码怎么写”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“前端实现滑动按钮AJAX与后端交互的代码怎么写”文章吧。

html代码

<divclass="switch-box"><inputid="switchButton"type="checkbox"class="switch"/><labelfor="switchButton"></label></div>css代码

.switch-box{width:48px;}.switch-box.switch{/*隐藏checkbox默认样式*/display:none;}.switch-boxlabel{/*通过label扩大点击热区*/position:relative;display:block;margin:1px;height:28px;cursor:pointer;}.switch-boxlabel::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:1px1px1px1pxrgba(0,0,0,0.06);/*通过transform、transition属性控制元素过渡进而形成css3动画*/-webkit-transform:translateX(-9px);-moz-transform:translateX(-9px);transform:translateX(-9px);-webkit-transition:all0.3sease;-moz-transition:all0.3sease;transition:all0.3sease;}.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-boxlabel::after{/*after设置滚动前背景色*/content:"";display:block;border-radius:30px;height:28px;background-color:#dcdfe6;-webkit-transition:all0.3sease;-moz-transition:all0.3sease;transition:all0.3sease;}.switch-box.switch:checked~label::after{background-color:#13ce66;}效果图

效果如图：

JS事件触发

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

input添加onclick事件，点击触发reverseStatus()函数

<script>functionreverseStatus(id){$.get("/pocs/reverse/"+id);}</script>flask后端接口

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

在后端编写我们需要的逻辑

以上就是关于“前端实现滑动按钮AJAX与后端交互的代码怎么写”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。