SSH+Ajax實現使用者名稱重複檢查

標籤：style   blog   http   color   os   io   ar   for   檔案   

1、struts.xml設定

<package name="default" namespace="/" extends="json-default"><!--用ajax要此extends-->

<action name="userJSON_checkname" class="ssh.action.UserAction" method="checkName" >
<result type="json">
<!-- root的值對應要返回的值的屬性,這裡的result值即是 對應action中的屬性result,也即ajax中的傳回值data -->
<param name="root">checkresult</param>
</result>
</action>

</package>

2、html和js，在需要提交的form頁面中包含兩個js檔案，jquery.js（隨便下載一個版本）和username_check.js（如下）

<form id="tea_reg" method="post" name="tea_reg" >使用者名稱<input name="user.User_LogName" type="text"id="user.User_LogName"size="20" maxlength="255" />
<label id="message">驗證使用者名稱</label>
</form>

var user = {     inintEvent: function(){         $("input[name=‘user.User_LogName‘]").unbind("blur"); /*移動開輸入框的時候就會響應，user.User_LogName為輸入框的名字*/        $("input[name=‘user.User_LogName‘]").bind("blur", function(){             user.checkUser($(this).val());         });     },         checkUser:function(logname){         var parameter = {             logname:logname/*入參,為什麼用這樣表示,形參:實參？*/        };         $.post("userJSON_checkname.action",parameter,function(data){ /*userJSON_checkname為action的名字*/                /*這裡的參數date就是在struct.xml裡面定義的參數checkresult，也即action的一個屬性值*/             if(data=="ok"){                 $("#message").text("該使用者名稱可用");                $("#message").css("color","blue");             }else{                 $("#message").text("該使用者名稱不可用");                $("#message").css("color","red");             }                     });             } }; /*啟動頁面的時候綁定動作綁定*/$(document).ready(function(){     user.inintEvent(); /*綁定到使用者名稱輸入框*/}); 

3、action部分，在UserAction類中添加如下代碼

　　 public String logname;    public String checkresult;    public String getcheckresult() {/*名字要一致，用於返回資料*/        return this.checkresult;    }        public void  setlogname(String logname) /*名字要一致，會自動擷取傳遞過來的參數logname*/    {        this.logname = logname;    }    public String getlogname()     {        return this.logname;    }    public String checkName(){        User tmp;        tmp = userservice.findUserByName(logname);/*userservice的具體方法根據自己的項目設定定義，這已經與ajax無關了*/        if(null !=tmp )        {this.checkresult = "err";/*最終要返回的值，瀏覽器自動擷取*/        }        else        {            this.checkresult = "ok";        }            return SUCCESS;    }

4、實現調試，在chrome中查看提交和返回的結果

SSH+Ajax實現使用者名稱重複檢查