layui的登录ajax,layui如何实现登录功能
layui如何实现登录功能
发布时间:2020-06-17 09:10:11
来源:亿速云
阅读:548
作者:Leah
layui如何实现登录功能?相信很多新手小白还没学会这个技能,通过这篇文章的总结,希望你能学会学会这个技能。以下资料是实现的步骤。一、layui框架的文件结构如下:
内置方法config的使用
可以在使用模块之前,全局化配置一些参数,如下:layui.config(
{
dir : '/res/layui/' //layui.js 所在路径(注意,如果是script单独引入layui.js,无需设定该参数。),一般情况下可以无视
,
version : false //一般用于更新模块缓存,默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值,如:201610
,
debug : false //用于开启调试模式,默认false,如果设为true,则JS模块的节点会保留在页面
,
base : '' //设定扩展的Layui模块的所在目录,一般用于外部模块扩展
}
);
//这里我主要来理解下base参数,当我自定义了一个模块,如user.js,放在/static/js/目录下,即不是layui里有的,那么我可以通过如下方法使用自定义模块里的方法:
layui.config(
{
base : "/static/js/"
}
).use(['user'], function ()
{
var user = layui.user;
user.findUsrByUserName(username);
}
);
]
登录页面的实现
(1)登陆,我主要用了layui的轮播和提交功能,语言太惨白i,直接贴代码:
登录
登录
登陆系统
![输入图片说明](https://static.oschina.net/uploads/img/201709/03092118_VUPK.png "在这里输入图片标题")< script type = "text/javascript" >
//
layui.use(['form', 'layer', 'jquery', 'carousel'], function ()
{
var $ = layui.jquery,
form = layui.form,
carousel = layui.carousel;
/**背景图片轮播*/
carousel.render(
{
elem : '#login_carousel',
width : '100%',
height : '100%',
interval : 2000,
arrow : 'none',
anim : 'fade',
indicator : 'none'
}
);
/**监听登陆提交*/
form.on('submit(login)', function (data)
{
//弹出loading
var loginLoading = top.layer.msg('登陆中,请稍候',
{
icon : 16,
time : false,
shade : 0.8
}
);
//记录ajax请求返回值
var ajaxReturnData;
//登陆验证
$.ajax(
{
url : '/login/login',
type : 'post',
async : false,
data : data.field,
success : function (data)
{
ajaxReturnData = data;
}
}
);
//登陆成功
if (ajaxReturnData.rendercode == 0)
{
window.location.href = "/";
top.layer.close(loginLoading);
return false;
}
else
{
top.layer.close(loginLoading);
top.layer.msg(ajaxReturnData.errmsg,
{
icon : 5
}
);
return false;
}
}
);
}
);
//]]>
< / script >
上文描述的就是layui实现登录功能,具体使用情况还需要大家自己动手实验使用过才能领会。如果想了解更多相关内容,欢迎关注亿速云行业资讯频道!
layui的登录ajax,layui如何实现登录功能相关推荐
- laravel ajax login,设置在ajax上记住laravel登录
使用laravel重建我的系统5.4. 我做了一个可以工作的ajax登录,但是我想将记住选项添加到auth. 文档说这有关设置记住:设置在ajax上记住laravel登录 if (Auth::atte ...
- layui对jquery ajax的封装,layui封装
[TOC] # 示例代码 ``` /** * 示例代码 * 可参照此代码进行复制进行扩展 * @author hongwei 2018-05-18 */ layui.define(['jquery', ...
- Ajax异步方式实现登录与參数的校验
Ajax异步方式实现登录与參数的校验 登录代码 这个是使用Bootstrap3的组件功能实现的 <div class="login_con_R"><h4>登 ...
- egg(113)--egg之登录成功跳转到登录之前的页面
流程 点击登录按钮,前端把当前的url,传给后台 后台把url传给,登录页面 登录页面,点击登录,跳转到登录前的页面 效果 第一步 第二步 第三步 router router.get('/login' ...
- java实现layui分页_基于LayUI分页和LayUI laypage分页的使用示例
本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图: 一.引用js依赖 主要是jquery-1.11. ...
- [laravel]用户异地登录后踢掉之前的登录
不同用户和服务器之间由一个唯一的session来区分,但是一般情况下不同的session对应的用户model可以是同一个. 为了实现只能同时在一个地方登陆,可以在用户的字段里增加一个last_sess ...
- usmssosetup 单点登录被禁用_SSO(单点登录)实施中遇到的几个问题
单点登录应用中,遇到如下的几个问题:1.超时问题:2.jsessionid问题:3.单点退出时有时子系统未能正常退出:4.有些请求路径不需要单点登录过滤器拦截:5.不同应用服务实现可能要求SSO客户端 ...
- php拦截登录页面跳转页面,PHP未登录自动跳转到登录页面
PHP未登录自动跳转到登录页面 下面一段代码给大家分享php未登录自动跳转到登录页面,具体代码如下所示: namespace Home\Controller; use Think\Controller ...
- layui穿梭框和layui表格数据交互
<style>/*树形菜单--分割线内文字*/.diseasea{position: relative;left:180px; /*右*/color: #005cbf}/*表单信息--分割 ...
最新文章
- 修改了/etc/systemd/system.conf以后必须使用daemon-reexec
- PHP 面向对象使用案例
- panda 透视表 计算比例_数据透视表中有趣的那些事,你知道吗?
- synchronized()_Synchronized关键字引出的多种锁
- oracle 11gr2 rac价格,调整Oracle 11gR2 RAC为单实例库
- 【leetcode 简单】第四十二题 阶乘后的零
- Java面试题整理二(侧重SSH框架)
- docker java 中文乱码_记一次ubuntu docker 镜像 java 中文乱码问题查找
- java_web基本概念
- 理解密码学中的双线性映射
- Java - HuTool 使用 PhoneUtil、ReUtil等工具类(三)
- ARM920T的MMU与Cache
- 西南地区首次大型“社区面基 Party”落幕,TiDB TechDay 下一站深圳见!
- /etc/rc0.d----rc3.d---rcS.d这些目录的意义
- linux磁盘配额步骤,Linux磁盘配额设置及使用
- 湿寒阳虚体质如何艾灸
- Soot -- Soot中的一些语句细节
- 华为视频会议系统 端口映射
- EasyNVR H5无插件摄像机直播解决方案前端解析之:监控实时直播的四分屏的前端展示
- STC12C5A60S2 AD 转换详解
热门文章
- 「雕爷学编程」Arduino动手做(24)——水位传感器模块
- Arm-Linux 移植 ssh
- Atcoder Grand Contest 026 (AGC026) F - Manju Game 博弈,动态规划
- sublime text3 3176激活
- 一次MySQL死锁问题解决
- MongoDB 核心将支持全文搜索功能 (2.3.2)
- flutter UiKitView 加载ios 原生view
- flutter中使用InkWell给任意Widget添加点击事件
- Mr.J--Java基础问题30问
- Python中布尔值是False的所有值