美文网首页
layui-滑块验证的动态修改及初始化

layui-滑块验证的动态修改及初始化

作者: EndPein | 来源:发表于2019-11-03 00:33 被阅读0次

先说一下背景:

有一个如下页面,我需要能通过页面的开关来设置是否允许某个用户登录站点,在点击滑块后直接就可以发送请求。同时页面在打开后自动会加载当前的用户状态列表。

先上代码:

<div class="weadmin-body">

      <table class="layui-hide" lay-filter="test" id="demo">

<script type="text/html" id="titleTplm">

  <input type="checkbox" name="{{ d.id }}" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭"  {{ d.opening?"checked":""}} >

<script src="../../lib/layui/layui.js" charset="utf-8">

  layui.use(['jquery','table','form','layer','laytpl'], function(){

var layer =layui.layer;

      var table =layui.table;

      var form =layui.form;

      var laytpl =layui.laytpl;

      var $ =layui.$;

      //第一个实例

      table.render({

elem:'#demo'

        ,url:'http://127.0.0.1:8000/login/login' //数据接口

        ,page:true //开启分页

        ,cols: [[//表头

            {field:'id', title:'ID'}

,{field:'age', title:'年龄'}

,{field:'sex', title:'性别'}

,{field:'name', title:'姓名'}

,{switch:'opening',title:'允许登录',templet:'#titleTplm',nresize:true}

]]

});

      form.on('switch(switchTest)',function (obj) {

var sid =this.name;

        var status = obj.elem.checked;

        layer.msg('发送请求:'+status);

        $.ajax({

type:"PUT",

            data:{'sid':sid,'status':status},

            url:'http://127.0.0.1:8000/login/login',

            success:function (req) {

if (req.code==0){

return;

              }else {

return;

              }

l

            }

})

});

  });

</script>

----------------------------

然后在来说说遇到的问题:

1、在默认获得开关状态的问题时自己不够仔细,官方文档是有说明”checked“来进行控制,可是自己不够仔细,没有细致的去看,造成这个问题浪费了比较多的时间;

2、模板语言、js的不熟练,通过三目运算可以简单解决状态的切换。{ d.opening?"checked":""}}

相关文章

  • layui-滑块验证的动态修改及初始化

    先说一下背景: 有一个如下页面,我需要能通过页面的开关来设置是否允许某个用户登录站点,在点击滑块后直接就可以发送请...

  • OpenGL ES – 设置模糊图片

    老规矩先看效果,下图中上部分图片是原图,下部分图片是修改过模糊度的图片。 上图通过滑块动态修改图片的模糊程度,滑块...

  • Python+Selenium 拖动滑块 (一)

    在我们登录账号中常常会遇到各种验证码,如图片验证码,拖动滑块验证.....滑块验证码只需要用户使用鼠标将滑块从某个...

  • Axure RP 9原型案例:滑块验证码

    | 一、概述 滑块验证是一种新的交互验证方式,与传统的图文验证码相比,更安全更智能。通常用于注册、登录、密码修改等...

  • python处理滑块验证的轨迹计算问题

    在上一回中说了五行代码找图中滑块验证的缺口位置《python五行代码解决滑块验证的缺口距离识别,破解滑块验证》,本...

  • 爬虫滑动验证识别 opencv-python

    前言 滑块验证码破解是一直都是一个棘手的问题,毕竟多数网站都会采用滑块验证码要搞现在的滑块验证码绕不开图像处理,图...

  • selenium破解网易易盾滑块

    前言 之前由于工作原因做过极验验证的滑块验证码,该网站的滑块验证码是直接能提取出全图片和缺口图片,利用pillow...

  • 11 数组

    数组的定义 01 动态初始化 02 静态初始化 03 省略格式及初始化注意事项 04 获取数组 05 动态数组初始...

  • appium+aircv解决滑块图片验证码问题

    因为登录接了阿里聚安全的安全验证,有图片滑块验证,暂时通过处理图片解决了,待后续优化及试验实际操作情况。先放一个解...

  • Java工具类--图片滑块验证码

    背景 在PC和App中, 常用图片滑块来做辅助验证, 如下图所示: 分析 图片素材 背景图片 滑块形状 滑块阴影 ...

网友评论

      本文标题:layui-滑块验证的动态修改及初始化

      本文链接:https://www.haomeiwen.com/subject/spqkbctx.html