bootstrap学习(三):跟着宝哥学java：bootstrap的弹出框：老师登录 登出实现

3.4 老师登陆

• 参考官网

• 模态框代码:::::注意写在container外面

<!--登陆模态框-->
<!--登录模态框：类似于弹出框-->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">老师登录</h4>
            </div>
            <div class="modal-body">
                <form id="form_login">
                    <div class="form-group">
                        <label class="control-label">老师名字：</label>
                        <input type="text" class="form-control"  name="tname">
                    </div>
                    <div class="form-group">
                        <label class="control-label">老师密码：</label>
                        <input type="text" class="form-control"  name="tpwd">
                    </div>
                    <div class="form-group">
                        <label class="control-label">验&nbsp;证&nbsp;码：</label>
                        <img src="<c:url value='/teacher/yzm.action'/>"  id="img_yzm"/>
                        <input type="text" class="form-control"  name="yzm">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">退出</button>
                <button type="button" class="btn btn-primary"  id="button_login">登录</button>
            </div>
        </div>
    </div>
</div>

• js

<script type="text/javascript">

    $(function(){
        //展示登陆模态框
        $("#loginModal").modal("show");
        //给id="img_yzm"添加点击事件
        $("#img_yzm").bind("click",function(){
            //后面的参数：没有实际意义 只是为了让每次请求不一样 就不会使用缓存了
            $("#img_yzm").attr("src",path+"teacher/yzm.action?n="+Math.random());
        });
    });

    //id="button_login"被点击 发出登陆请求
    $(function(){
        $("#button_login").bind("click",function(){
            var  tname=$("#form_login input[name='tname']").val();
            var  tpwd=$("#form_login input[name='tpwd']").val();
            var  yzm=$("#form_login input[name='yzm']").val();
            if(!tname || !tpwd || !yzm){
                alert("信息不完整 不能登陆");return;
            }
            //发送ajax请求
            $.ajax({
                cache:false,
                type:"GET",
                data:"tname="+tname+"&tpwd="+tpwd+"&yzm="+yzm,
                url:path+"teacher/login.action",
                dataType:"json",
                async:false,
                success: function(rv){
                    if(rv.status==200){
                        //登陆成功 当前模态框隐藏
                        $("#loginModal").modal("hide");
                        return;
                    }
                    alert(rv.errorMessage);
                }
            });
        });
    });
</script>

• 测试效果

3.5 老师登出

登出按钮 点击 清空session  弹出登陆模态框

• 添加按钮组

<!--添加按钮组-->
<div class="btn-group" role="group">
    <button type="button" class="btn btn-default" id="but_logout">老师登出</button>
    <button type="button" class="btn btn-default" id="but_add">添加学生</button>
    <button type="button" class="btn btn-default" id="but_delete">删除学生</button>
</div>

• 登出的action

@GetMapping("/teacher/logout.action")
@ResponseBody
public ResponseVO<String> logoutMethod(int tid, HttpServletRequest req){
    Teacher teacher=teacherService.getOneByTid(tid);
    req.getSession().invalidate();
    return new ResponseVO<>(200,null,"用户("+teacher.getTname()+")登出成功！");
}

• 登出的js

<!--登出功能-->
<script type="text/javascript">
    $(function(){
        $("#but_logout").bind("click",function(){
            //请求
            $.ajax({
                cache:false,
                type:"GET",
                data:"tid="+ $("#span_tname_title").attr("title"),
                url:path+"teacher/logout.action",
                dataType:"json",
                async:false,
                success: function(rv){
                    if(rv.status==200){
                        //给span_tname_title设置文本内容
                        $("#span_tname_title").text("");
                        $("#span_tname_title").removeAttr("title");
                        //登陆成功 当前模态框显示
                        $("#loginModal").modal("show");
                        return;
                    }
                    alert(rv.errorMessage);
                }
            });
        });
    });
</script>