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

2024-09-30 19:02:48

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

效果图

效果如图：

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与后端交互内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

jquery ajax的success回调函数中实现按钮置灰倒计时

主要是实现异步手机发送短信成功之后在ajax的success回调中实现将发送按钮置灰并倒计时,刚开始一直报js错误,问题可能出在于调用ajax之后this被更新,随意在这之前先把this对象赋给一个变量就没问题按钮倒计时代码复制代码代码如下: var wait = 60; get_code_time = function (o) { if (wait == 0) { o.removeAttribute("disabled"); o.value = "免费获取验证码&qu
按钮的Ajax请求时一次点击两次提交的解决方法

页面中的按钮的type是submit的: <input type="submit" value="Create" id="submit" /> ajax的请求,在JQuery中是: $(function () { $('#submit').click(function () { var createGenreForm = $('#createGenreForm'); if (createGenreForm.valid()) { var
Ajax搜索结果页面下方的分页按钮的生成

时间紧木有做成JQ插件,通用性可能差一些但是基本功能是有的,比较适合初学者,望老鸟大虾表拍砖才好哦少说了一句我用的是 JQueryUI里面的button感觉还不错下图是第一页的样子这是最后一页的样子废话不说了上代码上面有参数说明看不懂的欢迎留言复制代码代码如下: //------------------------------------------------------ // pageingBtn() 分页按钮的显示方法 // pageIndex: 当前第几页 // maxPag
在jQuery ajax中按钮button和submit的区别分析

复制代码代码如下: <script type="text/javascript"> $(document).ready(function(){ $("#submit").click(function(){ $.post("sendPwd.php",{QQnum:$("#QQnum").val(),psw:$("#psw").val()},function(data){ $("#aaa
前端ajax的各种与后端交互的姿势

前端中常常用的与后端交换数据的话,通常是要用到ajax这种方法的但是交互的方式有很多种,很多取决于你后端的属性,我这儿主要列举我目前项目比较常用的两种方式 --一个是我们通用的web api和控制器, 首先我们来仔细看看ajax来与webapi做的交互数据这里先简单描述一下web api的四种属性--GET,POST,PUT,DELETE 这里面我永昌使用的是GET和POST 如果这时候我们需要用到AJAX与那些数据做后端交互的话 $.ajax({ url: "你的webapi",
前端实现滑动按钮AJAX与后端交互的示例代码

目录 html代码 css代码效果图 JS事件触发 flask后端接口参考链接 html代码 <div class="switch-box"> <input id="switchButton" type="checkbox" class="switch" /> <label for="switchButton"></label> </div>
Flask框架运用Ajax实现数据交互的示例代码

目录前后端发送字符串前后端发送JSON数据发送数据并携带token 收发JSON格式字符串使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载刷新整个页面,这使得程序能够更快地回应用户的操作,如下笔记将简单介绍使用AJAX如何实现前后端数据通信. 前后端发送字符串前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
JS的Ajax与后端交互数据的实例

JS中很多地方会使用Ajax与后台进行数据交互. Ajax是通过http,使得JS与后端进行数据通信,由于Ajax的异步特性,可以使多个Ajax请求同时访问后端,对页面的局部数据进行逻辑处理,并渲染. ajax中前端和后端的交互图: 代码实现: $.ajax({ type: "post", url: "http://localhost:8080/ccnb/user/login", data: { "telephone": login_name,
Django中使用jquery的ajax进行数据交互的实例代码

jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择最终实现效果如图: 将jquery文件拷贝到static/js/目录下打开booktest/views.py文件,定义视图area1,用于显示下拉列表 #提供显示下拉列表的控件,供用户操作 def area1(request): return render(request,'booktest/area1.html') 打开bo
Django 使用Ajax进行前后台交互的示例讲解

本文要实现的功能是:根据下拉列表的选项将数据库中对应的内容显示在页面,选定要排除的选项后,提交剩余的选项到数据库. 为了方便前后台交互,利用了Ajax的GET和POST方法分别进行数据的获取和提交. 代码如下:  <script> $("#soft_id").change(function(){ var softtype=$("#soft_id").find("option:select
Android中js和原生交互的示例代码

本文介绍了Android中js和原生交互的示例代码,分享给大家,具体如下: 加载webview的类 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); JavaScriptInterf
FastApi+Vue+LayUI实现前后端分离的示例代码

目录前言项目设计后端前端运行项目 Q&A 前言在前面的Api开发中,我们使用FastApi已经可以很好的实现.但是实际使用中,我们通常建议前后端项目分离.今天我们就使用FastApi+Vue+LayUI做一个前后端分离的Demo. 项目设计后端后端我们采用FastApi在新的test视图中,定义一个路由,并将其注册到app中,并且在test视图中定义一个接口,实现模拟从数据库读取数据供前端调用渲染. 代码 test.py from fastapi import FastAPI,D
JavaScript使用Ajax上传文件的示例代码

本文介绍了JavaScript使用Ajax上传文件的示例代码,分享给大家,具体如下: 实现文件的上传主要有两种方式: 使用form表单提交上传 html代码如下: <form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file" name="file"/> <button id=&
springboot前后台数据交互的示例代码

本文介绍了springboot前后台数据交互的示例代码,分享给大家,具体如下: 1.在路径中传递数据,比如对某个数据的id:123 前台发送:格式大致如下在路径中传数据后台接收: 后台接收数据后台接收结果 2.查询字符串传递数据前台发送: 前台使用Querystring发送数据后台接收: 这里@RequestParm可以不写,在后台找不到前台对应的字段时,输出null,在@RequestParam中指定的话输出指定的值(前台没给出字段时): 后台接收queryString方式传递的数
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码

向上滑动隐藏底部悬浮框,向下滑动显示悬浮框.使用pc端浏览器查看请把浏览器设置为手机浏览器模式. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>手机端触屏手指滑动方向</title> <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,us

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

目录

html代码

css代码

效果图

JS事件触发

flask后端接口

参考链接

相关推荐

随机推荐