前端实现滑动按钮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 相关文章推荐
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 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
网站当前的在线人数
2006/10/09 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
教师的实习鉴定
2013/12/15 职场文书
机械设计毕业生自荐信
2014/02/02 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
小学生综合素质评语
2014/04/23 职场文书
街道务虚会发言材料
2014/10/20 职场文书
世界地球日活动总结
2015/02/09 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书