在 bootstrap-switch 中加入带回滚的 ajax 请求

本文介绍了如何在使用Bootstrap-Switch的前端项目中,结合Ajax实现开关状态的改变并处理回滚操作。当开关状态变化时,通过Ajax向服务器发送请求更新设置。若请求失败,将利用Bootstrap-Switch的API避免回滚过程中的死循环问题。同时,解决因ES6箭头函数与$符号冲突导致的错误。
摘要由CSDN通过智能技术生成

最近遇到的一个 Web 项目,页面上需要用类似 toggle 的开关。由于整个前端是用 bootstrap 搭建起来的,我选择了用 bootstrap-switch 做这个开关。
bootstrap-switch
样子大概如上图所示。

想要的功能呢,就是当它在 on 的时候,就把对应的设置项打开,当它在 off 的时候,就把对应的设置项关闭。
所以,每次前端改变了这个 switch 的值,就得向服务器发送 Ajax 请求,做相应的事情,如果成功,则开关切换是正确的;如果失败,则开关切换是错误的,要回滚。

由于 bootstrap-switch 的一些示例页面是 https 的,但又引入了 http 的静态资源(css/js/img),所以网上很多示例页面没法直接查看,只能下载下来在本地查看。我后来找到了一个能看的方法:
把它的代码 clone 到本地,浏览器打开 doc 目录

以下是在 stackoverflow 找到的可以把 Ajax 加进去的代码:

$("input.switch-input").on('change.bootstrapSwitch', function(e){
   

    if($(this).is
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值