使用javaeye的登陸效果

在項目中突然感覺登陸放在什麼地方都不舒服，不如做成javaeye的樣式好了，也想順便看一看是如何的實現。google中搜索'ajax 模式對話框'還真有一些，去年的程序員雜誌中有一篇類似的介紹，說明了一下原理，就是把登陸的代碼放在一個隱藏的div中，登陸時使用一些CSS的樣式達到效果。CSS我不怎麼樣，看來估計要使用工具類了。結果果然搜索到了，還是在javaeye上找到的，就是這個網址啦，http://prototype-window.xilinus.com。

 

下載之後是windows_js_1.2.1版本，發現其中也使用到了prototype.js，感謝外國人的無私奉獻。

先貼上我的隱藏部分，就是登陸表單

html 代碼

<div id="login" style="display:none">
    <p><span id='login_error_msg' class="login_error" style="display:none">&nbsp;</span></p>
    <div style="clear:both"></div>
    <p><span class="login_label">會員名</span> <span class="login_input"><input id="usrid" name="usrid" type="text"/></span></p>
    <div style="clear:both"></div>
    <p><span class="login_label">密碼</span> <span class="login_input"><input id="pswrd" name="pswrd" type="password"/></span></p>
    <div style="clear:both"></div>
</div>

 

然後就是他給提供的一系列效果了，看過一些example發現很有意思，我使用的是其中的對話框

js 代碼

function openAjaxConfirm() {
        Dialog.confirm($('login').innerHTML, {className:"alphacube", width:400,
                                  okLabel: "login", cancelLabel: "cancel",
                                  onOk:function(win){
                                        checkUser();
                                        }});
    }

 

其中的onOk就是點擊OK按鈕執行的動作啦，這裏需要一個檢查用戶的ajax代碼

js 代碼

function checkUser() {
        if($F("usrid" )== "") {
            return false;
        }

        var params = 'actionflag=user&usrid=' + $F("usrid") + '&pswrd=' + $F("pswrd");
        var url = '../foreground/userAjaxBean';
        var myAjax = new Ajax.Request(
                        url,
                        {method: 'post', parameters: params, onComplete: showResponse}
                     );
    }

../foreground/userAjaxBean是我的servlet(感覺這部分貼上來意義不大，畢竟不一定非要使用servlet，所以貼上部分代碼)

java 代碼

public String validateUser(String usrid,String pswrd) {
        fgUser = fguserService.getUserByUsridAndPwd(usrid.toLowerCase(),EchanceUtil.encryptPwd(pswrd));
        if(fgUser == null){
            return "error";
        }else{
            if(!"Y".equalsIgnoreCase(fgUser.getAccs())){
                return "error";
            }
            fgUser.setPswrd(null);
            fgUser.setUsrid(fgUser.getUsrid().toLowerCase());
            ActionContext.getActionContext().getSessionMap().put(BaseConstants.FG_USER_SESSIONKEY,fgUser);
        }
        return "success";
    }

 

裏面使用了一些工具類等文件，如果驗證正確會返回success，否則返回error。

下面又到了客戶端了，接受服務器返回的javascript

js 代碼

function showResponse(originalRequest){
        if(originalRequest.responseText == "error"){
            $('login_error_msg').innerHTML='登陸失敗';
            $('login_error_msg').style.display = "";
            Windows.focusedWindow.updateHeight();
            //new Effect.Shake(Windows.focusedWindow.getId()); 打開此處如果驗證失敗會震動哦
            return false;
        }else{
            window.location='index.shtml';
            //window.location.reload(true); 刷新當前頁面，我是直接刷新到首頁
            return true;
        }
    }

到這裏就結束了，給大家上個效果看看，打開對話框時頁面就是不可編輯啦，根據自己喜歡的樣子對CSS略加改動，就OK了。篇幅原因CSS就不貼上來了，意義不大。