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


Posted in Javascript onFebruary 24, 2022

html代码

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

css代码

.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;
}

效果图

效果如图:

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

JS事件触发

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

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

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

flask后端接口

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

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

参考链接

https://article.itxueyuan.com/rx83a2

到此这篇关于前端实现滑动按钮AJAX与后端交互的文章就介绍到这了,更多相关滑动按钮AJAX与后端交互内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery select操作控制方法小结
May 26 Javascript
javascript操作referer详细解析
Mar 10 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
ionic实现底部分享功能
May 11 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 #Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 #Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 #Vue.js
JavaScript实现酷炫的鼠标拖尾特效
Vue h函数的使用详解
Feb 18 #Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 #Vue.js
详解JSON.parse和JSON.stringify用法
Feb 18 #Javascript
You might like
php实现水仙花数的4个示例分享
2014/04/08 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
Dom与浏览器兼容性说明
2010/10/25 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
python中的yield使用方法
2014/02/11 Python
python基础教程之循环介绍
2014/08/29 Python
Python常见异常分类与处理方法
2017/06/04 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
python实现TCP文件传输
2020/03/20 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
高二英语教学反思
2014/01/19 职场文书
纪检监察建议书
2014/05/19 职场文书
个人违纪检讨书
2014/09/15 职场文书
免职证明样本
2014/10/23 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
大学生读书笔记范文
2015/07/01 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
python - timeit 时间模块
2021/04/06 Python
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers