这篇“前端实现滑动按钮ajax与后端交互的代码怎么写”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“前端实现滑动按钮AJAX与
这篇“前端实现滑动按钮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 { 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')" />
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与后端交互的代码怎么写”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网精选频道。
--结束END--
本文标题: 前端实现滑动按钮AJAX与后端交互的代码怎么写
本文链接: https://www.lsjlt.com/news/323251.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-11
2024-05-11
2024-05-11
2024-05-11
2024-05-11
2024-05-11
2024-05-11
2024-05-11
2024-05-11
2024-05-11
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0