近期學習了SSH2(Struts2+Spring+Hibernate)的整合后,開始嘗試的寫一個登陸界面,結果發現:若是單單使用struts2來進行頁面跳轉的話頁面的效果不怎么樣,同時也無法進行局部刷新(即異步提交驗證)。
于是,我開始在網上搜索解決的辦法,有些說通過一個隱藏的iframe來達到效果,當我總覺得麻煩和不實用。后來問了下老師,告訴了我使用ajax可以達到想要的效果,我又發現網上有很多例子都是ajax的,但缺少的就是SSH2(整合好的)和ajax 的整合(ajax使用了jQuery框架)。
說說我想要的效果:
登錄頁面點擊提交后 進行后臺的驗證;
驗證成功跳轉到index.Jsp;
驗證失敗則在本登錄頁面執行一個jQuery腳本提示用戶;
需要的包:
SSH2使用到的包外,還需要struts2的以下包:
commons-beanutils-1.8.0.jar
commons-collections-3.1.jar
commons-fileupload-1.3.1.jar
commons-io-2.2.jar
commons-lang-2.4.jar
commons-lang3-3.1.jar
commons-logging-1.1.3.jar
ezmorph-1.0.6.jar
freemarker-2.3.19.jar
json-lib-2.3-jdk15.jar
ognl-3.0.6.jar
struts2-core-2.3.16.3.jar
struts2-json-plugin-2.3.16.3.jar
xwork-core-2.3.16.3.jar
好了,開始貼代碼:
login.jsp
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8" /><title>會員登陸</title><!-- 必須添加jQuery 否則ajax將不啟用。--><script type="text/javascript"src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("#button").click (function(){varuser =$("#User").val();varpassWord =$("#PassWord").val(); $.ajax({ //這里的需要Struts.xml的<action/>的name屬性一致。 url:‘login.action‘, //提交類型 type:‘POST‘, //提交數據給Action傳入數據 data:{‘User‘:user,‘PassWord‘:passWord}, //返回的數據類型 dataType:‘json‘, //成功是調用的方法 success:function(data){ //獲取Action返回的數據用 data.Action中的屬性名 獲取 if(data.result=="false") { alert("賬號密碼錯誤"); }elseif(data.result=="true"){ //進行頁面跳轉,因為ajax我們的Action只返回數據,不在進行跳轉了... location.href = "index.jsp"; } } }); }); });</script> </head> <body>
賬號:<input id="User" name="User"type="text" /><br/>
密碼:<input id="PassWord" name="PassWord"type="password" /><br/>
<input id="button" type="button"value="提交" /> </body></html>
LoginAction.java
新聞熱點
疑難解答
圖片精選