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中查看提交和返回的結果
更多詳情見請繼續閱讀下一頁的精彩內容: http://www.linuxidc.com/Linux/2014-09/107021p2.htm