layerUI+Ajax打开页面执行操作后关闭问题
来源：互联网 发布：收入词典的网络词语 编辑：程序博客网 时间：2024/05/20 17:41
layer–很好用的web弹框/层。
官方链接：http://layer.layui.com
写一个登陆弹框提示修改密码
导入layer.js、jquery.js、bootStrap.js/css、jquery-validate.js
<link type="text/css" rel="stylesheet" href="<%=path %>/bootstrap/css/bootstrap.min.css"/><script type="text/javascript" src="<%=path %>/jquery/jquery-2.1.1.min.js"></script><script type="text/javascript" src="<%=path %>/bootstrap/js/bootstrap.js"></script><script type="text/javascript" src="<%=path%>/jquery/jquery.validate.js"></script><!-- 导入layer --><script type="text/javascript" src="<%=path%>/layer/layer.js"></script>index.jsp （登陆成功记得传用户session）
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span>${user.user_name}</span><i class="glyphicon glyphicon-user"></i> <span class="caret"></span></a> <ul class="dropdown-menu"> <c:if test="${user!=null}"> <li><a href="javascript:info();">个人资料</a></li> <li><a href="javascript:updatePSW();">修改密码</a></li> <li><a href="<%=path%>/loginOutput">退出</a></li> </c:if> <c:if test="${user==null }"> <li><a href="<%=path%>/loginInput">登录</a></li> </c:if> </ul> </li> </ul> </div>为这个div添加悬停显示下拉菜单内容事件
<script type="text/javascript">//鼠标悬停 自动出现菜单 $(document).on("mouseenter",".dropdown",function(){ $(this).addClass("open"); })//鼠标移除 关闭菜单 $(document).on("mouseleave",".dropdown",function(){ $(this).removeClass("open"); })</script>效果如下：
然后登陆提示用户是否修改密码：
<input type="hidden" id="psw" name="login_password" value="${user.login_password }"/><script type="text/javascript">$(document).ready(function(){ var psw=$('#psw').val(); if((psw!=""&&psw!=null&&psw.length<6)||psw=='admin'){ layer.msg('您的密码过于简单，建议您修改密码！', { time: 20000, //20s后自动关闭 btn: ['好的', '不用了'], yes:function(index){ layer.close(index); updatePSW(); } }); }})function updatePSW(){ var index=layer.open({ type: 2, title:'修改密码', fixed: true, //不固定 shadeClose: true, //点击遮罩关闭 content: 'jsp/editPSW.jsp', maxmin: true, end: function () { layer.close(index); } }); layer.full(index);}为什么加了hidden的input呢
看看之前的文章http://blog.csdn.net/qq_36476972/article/details/70760732
判断条件可以自行修改
效果图：
点击好的之后当前页面弹出一个满屏的窗口
说说layer里的type属性值：
layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
editPSW.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% String path=request.getContextPath(); String basePath=request.getScheme()+"//"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>OA-修改密码</title><script type="text/javascript" src="<%=path %>/jquery/jquery-2.1.1.min.js"></script><script type="text/javascript" src="<%=path %>/bootstrap/js/bootstrap.js"></script><link type="text/css" rel="stylesheet" href="<%=path %>/bootstrap/css/bootstrap.min.css"/><script type="text/javascript" src="<%=path%>/jquery/jquery.validate.js"></script><!-- 导入layer --><script type="text/javascript" src="<%=path%>/layer/layer.js"></script><style type="text/css"> #form{ margin:0 auto; margin-top:100px; margin-left:350px; }/* 验证错误信息字体颜色 */ label.error{ color:red; display: inline-block;}</style></head><body><form class="form-horizontal" role="form" id="fm"><input type="hidden" id="userid" name="user_id" value="${user.user_id }"/><input type="hidden" id="oldpsw" name="login_password" value="${user.login_password }"/> <div id="form"> <div class="form-group"> <label class="col-sm-2 control-label"><span style="color:red;">*</span> 原密码：</label> <div class="col-sm-2"> <input type="text" class="form-control" id="psw" name="password"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"><span style="color:red;">*</span> 新密码：</label> <div class="col-sm-2"> <input type="text" class="form-control" id="newpsw" name="login_password"> </div> </div> <br> <div class="box-footer col-xs-5" style="text-align: center;"> <button type="submit" class="btn btn-success" style="width:200px;height:40px;">修改</button> </div> </div></form></body><script type="text/javascript">$(function(){ $("#fm").validate({ onsubmit:true, rules:{ password:{ required:true, minlength:5 }, login_password:{ required:true, minlength:5 } }, messages: { password: { required: "请输入原密码！", minlength: "密码长度至少为5！" }, login_password: { required: "请输入新密码！", minlength: "密码长度至少为5！" } }, submitHandler:function(){ var userid=$('#userid').val(); var psw=$('#psw').val(); var oldpsw=$('#oldpsw').val(); var newpsw=$('#newpsw').val(); if(psw==oldpsw){ $.ajax({ url:'${pageContext.request.contextPath}/updatePwd', method:'post', data:{ user_id:userid, login_password:newpsw }, dataType:'json', success:function(ret){ if(ret.status=='ok'){ layer.msg('修改成功！登录状态已注销，请重新登录！',{time:3000,icon:1}); setTimeout(function(){ location.href ='${pageContext.request.contextPath}/loginOutput'; },2000); }else if(ret.status=='error'){ layer.msg('修改失败！',{time:3000,icon:5}); } }, error:function(ret){ layer.msg("ajax请求失败！数据信息="+JSON.stringify(ret),{time:3000,icon:5}); } }) }else{ layer.msg("原密码输入有误！",{time:3000,icon:5}); } } })})</script></html>然后这么写的话就有问题：
ajax操作成功后是在当前的窗口执行跳转，我要做的是关闭修改页面再跳转
网上看到的方法比如：
window.parent.location.reload();var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);试了试发现 执行操作成功页面直接关闭，ajax并没有在父页面跳转，用户还是登录状态。
最后的解决办法，改动ajax执行成功后跳转的URL
success:function(ret){ if(ret.status=='ok'){ layer.msg('修改成功！登录状态已注销，请重新登录！',{time:3000,icon:1}); setTimeout(function(){ parent.location.href ='${pageContext.request.contextPath}/loginOutput'; },2000); }else if(ret.status=='error'){ layer.msg('修改失败！',{time:3000,icon:5}); } },
修改成功后子页面两秒后关闭，并且父页面执行跳转，而后登录状态被注销。
。
0 0
- layerUI+Ajax打开页面执行操作后关闭问题
- 前端页面框架-----layerui
- ajax请求成功后执行回调方法后页面会自动刷新问题
- netbeans打开后自动关闭的问题
- 打开一个页面后，父页面DISABLE，在子页面关闭后，父页面ENABLE
- javascript 用了showDialog 关闭后又重新打开页面
- Vuejs关闭打开的窗口后刷新父页面
- 在关闭页面时执行一些代码ajax
- layerui
- VS2010打开.h后.cpp自动关闭或打开.cpp后.h自动关闭问题
- 父页面打开子页面后，子页面关闭父页面刷新
- thinkphp执行删除操作然后成功success后页面跳转失败问题
- Ajax请求后页面刷新问题
- 在IE、fixfox、chrome等浏览器中ajax提交成功后，打开新标签页面被浏览器拦截问题
- 关闭本页后还要执行的操作
- windows7打开或关闭Windows功能后空白的问题
- vmware 异常关闭后，虚拟机不能打开问题
- window.open打开的窗口关闭后刷新父页面的子页面
- prototype和__proto__的区别
- java基础--4.常用类-1.Object，Scanner,System
- 【Office Outlook】账户添加
- Codeforces 805 B
- 前端小白学习路线之HTML超文本标记语言
- layerUI+Ajax打开页面执行操作后关闭问题
- Java复习——继承作业
- 《Centos 7系列删除数据库并重新安装》
- [leetcode]525. Contiguous Array
- 导数的定义
- Android 读取所有短信
- iOS 开发之绘制虚线
- 系统调用fork()函数
- 安装cadence16.6/16.5经验(Unable to restart Cadence License Server...
