ajax實現模態登陸

  Ajax 即“Asynchronous Javascript And XML”（非同步 JavaScript 和 XML），是指一種建立互動式網頁應用的網頁開發技術。
  Ajax = 非同步 JavaScript 和 XML（標準通用標記語言的子集）。
***

使用場景

  通常，前臺分為無需登入介面和需要登陸介面，以場地預約與管理系統為例，未登陸時場地的情況應當也是可見的，但是預約功能顯然是不可使用的。所以在，未登入時點選預約應當彈出模態登陸的登陸框。如下圖：

***

具體實現程式碼：

$(function () {
        //核對是否登陸
        $(".空閒").click(function(){

            var page = "forecheckLogin";
            var flag = 1;
            $.get(
                page,
                function(result){
                    if("success"==result) {
                        flag = 0;
                    } else {
                        $("#loginModal").modal('show');
                    }
                }
            );
            if (flag == 1) {
                this.style.backgroundColor = "white";
                document.getElementById("total").innerText = "0";
            }

            return true;
        });
        //模態登陸核對賬號密碼
        $("button.loginSubmitButton").click(function(){
            var name = $("#name").val();
            var password = $("#password").val();
            if(0==name.length||0==password.length){
                $("span.errorMessage").html("*請輸入賬號密碼");
                $("div.loginErrorMessageDiv").show();
                return false;
            }
            var page = "foreloginAjax";
            $.get(
                page,
                {"name":name,"password":password},
                function(result){
                    if("success"==result){
                        location.reload();
                    }
                    else{
                        $("span.errorMessage").html("*賬號密碼錯誤");
                        $("div.loginErrorMessageDiv").show();
                    }
                }
            );
            return true;
        });
    })
 

<!--html部分-->
<div class="modal " id="loginModal" tabindex="-1" role="dialog" >
    <div class="modal-dialog loginDivInProductPageModalDiv">
        <div class="modal-content">
            <div class="loginDivInProductPage">

                <div class="alert" style="padding: 5px">
                    <span class="errorMessage" style="color: red;"></span>
                </div>


                <div class="login_acount_text">賬戶登入</div>
                <div class="loginInput " >
                            <span class="loginInputIcon ">
                                <span class=" glyphicon glyphicon-user"></span>
                            </span>
                    <input id="name" name="name"  type="text" placeholder="使用者名稱">
                </div>

                <div class="loginInput " >
                            <span class="loginInputIcon ">
                                <span class=" glyphicon glyphicon-lock"></span>
                            </span>
                    <input id="password" name="password"  type="password" placeholder="密碼" type="text">
                </div>
                <div>
                    <a href="register.jsp" class="pull-right">免費註冊</a>
                </div>
                <div style="margin-top:20px">
                    <button class="btn btn-block redButton loginSubmitButton" type="submit">登入</button>
                </div>
            </div>
        </div>
    </div>
</div>