前端实现滑动按钮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 相关文章推荐
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
Vue开发环境跨域访问问题
Jan 22 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
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
python基础之入门必看操作
2017/07/26 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Flask配置Cors跨域的实现
2019/07/12 Python
python爬虫添加请求头代码实例
2019/12/28 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
python动态规划算法实例详解
2020/11/22 Python
python Pexpect模块的使用
2020/12/25 Python
怎样声明子类
2013/07/02 面试题
超级搞笑检讨书
2014/01/15 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
优秀班组申报材料
2014/12/25 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
ubuntu下常用apt命令介绍
2022/06/05 Servers