這篇文章跟大家介紹基於SSH Jquery Ajax整合實現局部刷新,有興趣的朋友一起看看本文吧
近期學習了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="button" type="button"value="提交" /> </body> </html>
LoginAction.java
publicclass LoginAction extends ActionSupport { //使用@Resource注解注入条件属性名与 ref要一致才可 @Resource FUserService fUserServiceImp; @Resource FUser fUser; private String User; private String PassWord; private String result; public String getResult() { returnresult; } publicvoid setUser (String User) { this.User = User; } publicvoid setPassWord(String PassWord) { this.PassWord = PassWord; } public String execute() throws Exception { HttpServletRequest request = ServletActionContext.getRequest(); //获取ajax传过来的数据直接使用前台的属性名即可获取。 fUser.setUserEmail(User); fUser.setUserPassWord(PassWord); if(fUserServiceImp.CheckUser(fUser)!=null){ //返回给ajax的数据 this.result = "true"; }else{ this.result = "false"; } return"success"; } }
Struts.xml
<?xml version="1.0"encoding="UTF-8"?> <struts> <!—这是我们配置SSH时配置Struts的package --> <package name="Struts" extends="struts-default"> <action name="login"class="loginAction"> </action> </package> <!—为了让ajax可以调用Spring中的Action 配置ajax的package --> <package name="ajax_json" extends="json-default"> <!—本处的id就是ajax url的值,class引用了Spring 配置Action的id--> <action name="login" class="loginAction"> <result name="success" type="json"/> </action> </package> </struts>
上面是我整理給大家的,希望未來會對大家有幫助。
相關文章:
SpringMVC環境下實作的Ajax非同步請求JSON格式資料
以上是SSH+Jquery+Ajax框架整合的詳細內容。更多資訊請關注PHP中文網其他相關文章!