广告位联系
返回顶部
分享到

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

Ajax 来源:互联网 作者:秩名 发布时间:2022-02-23 15:13:08 人浏览
摘要

html代码 1 2 3 4 div class=switch-box input id=switchButton type=checkbox class=switch / label for=switchButton/label /div css代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

html代码

1

2

3

4

<div class="switch-box">

    <input id="switchButton" type="checkbox" class="switch" />

    <label for="switchButton"></label>

</div>

css代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

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

}

效果图

效果如图:

JS事件触发

1

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

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

1

2

3

4

5

<script>

    function reverseStatus(id){

        $.get("/pocs/reverse/"+id);

    }

</script>

flask后端接口

1

2

3

4

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

def reverse(id=None):

    print(id)

    return 'success'

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

参考链接

https://article.itxueyuan.com/rx83a2


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://www.cnblogs.com/Cl0ud/p/15913479.html
相关文章
  • AJAX原理以及axios、fetch区别

    AJAX原理以及axios、fetch区别
    AJAX原理 Ajax的原理简单来说是在用户和服务器之间加了个中间层(AJAX引擎),通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,
  • Ajax实现上传图像功能

    Ajax实现上传图像功能
    最终效果展示 xhr发起请求 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
  • Ajax的疑难杂症介绍

    Ajax的疑难杂症介绍
    跨域问题 如图所示,这是通过jquery封装的ajax请求了一个本地的php文件(无框架),console提示CORS策略已阻止来自来源的null:请求的资源上不
  • 前端实现滑动按钮AJAX与后端交互的代码

    前端实现滑动按钮AJAX与后端交互的代码
    html代码 1 2 3 4 div class=switch-box input id=switchButton type=checkbox class=switch / label for=switchButton/label /div css代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1
  • AJAX实现省市县三级联动效果

    AJAX实现省市县三级联动效果
    (tips:其实省市县三级联动只需要引入jQuery省市县三级联动插件就可以实现) 效果图 首先准备两个服务端文件,另一个文件太长,这里就不
  • AJAX实现指定部分页面刷新效果的代码

    AJAX实现指定部分页面刷新效果的代码
    需求:点击左边的选项,不需要整个页面刷新,只进行右边页面的刷新。 这里需要三个文件 work.html !DOCTYPE htmlhtml lang=zh-CNhead meta charset=UTF
  • Ajax实现三级联动的代码

    Ajax实现三级联动的代码
    一、导入数据表和gson.jar 该表包括了中国所有的
  • AJAX实现注册验证用户名的代码
    功能说明 当用户在注册页面输入用户名并且鼠标焦点离开输入框时,到数据表中去验证该用户名是否已经存在,如果存在提示不可用,否则
  • react axios跨域访问一个或多个域名问题的详解
    1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: proxy:http://iot-demo-web-dev.autel.com, //当然,这里是一
  • $.ajax中contentType: “application/json” 的用法
    具体内容如下所示: $.ajax({ type: httpMethod, cache:false, async:false, contentType: application/json; charset=utf-8, dataType: json,//返回值类型 url: path+url, data:j
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计