layerUI+Ajax打开页面执行操作后关闭问题

最新推荐文章于 2024-05-15 11:25:51 发布

· Coisini

最新推荐文章于 2024-05-15 11:25:51 发布

阅读量4.5k

点赞数

分类专栏：前端文章标签： web layer layerUI ajax SSM

本文链接：https://blog.csdn.net/qq_36476972/article/details/71249382

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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>&nbsp;&nbsp;原密码：</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>&nbsp;&nbsp;新密码：</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});
                        }
                    },