Maison > Article > interface Web > Intégration du framework SSH+Jquery+Ajax

Intégration du framework SSH+Jquery+Ajax

亚连original: 2018-05-24 15:43:482366parcourir

Cet article vous présente l'implémentation de l'actualisation partielle basée sur l'intégration SSH+Jquery+Ajax. Les amis intéressés devraient lire cet article ensemble

Après avoir récemment appris l'intégration de SSH2 (Struts2+Spring+Hibernate), J'ai commencé à essayer d'écrire une interface de connexion, mais j'ai découvert que si j'utilise simplement struts2 pour accéder à la page, l'effet de la page n'est pas très bon et il est également impossible d'effectuer un rafraîchissement partiel (c'est-à-dire une vérification de soumission asynchrone) .

J'ai donc commencé à chercher des solutions sur Internet. Certains ont dit que l'effet pouvait être obtenu grâce à une iframe cachée, mais j'ai toujours trouvé cela gênant et peu pratique. Plus tard, j'ai demandé au professeur et m'a dit que l'utilisation d'ajax pouvait obtenir l'effet souhaité. J'ai également découvert qu'il existe de nombreux exemples d'ajax sur Internet, mais ce qui manque, c'est l'intégration de SSH2 (intégré) et d'ajax (ajax utilise le cadre jQuery).

Parlez-moi de l'effet que je souhaite :

Cliquez sur Soumettre sur la page de connexion pour effectuer une vérification des antécédents

Si la vérification réussit, accédez à index.Jsp;

Si la vérification échoue, un script jQuery sera exécuté sur cette page de connexion pour inviter l'utilisateur

Packages requis :

En plus des packages utilisés par SSH2, les suivants ; des packages de struts2 sont également requis :

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

D'accord, commencez à publier le code :

<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>

Compte : 9b75639974f83d7d87f9c16c00f934a0076402276aae5dbec7f672f8f4e5cc81

Mot de passe :794afda3b00a587548b1b1efb7b7d454< ;br/>

 <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>

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus