Intégration du framework SSH+Jquery+Ajax-js tutoriel-php.cn

Intégration du framework SSH+Jquery+Ajax

亚连

Libérer： 2018-05-24 15:43:48

original

2370 Les gens l'ont consulté

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>

Copier après la connexion

Compte :

Mot de passe :< ;br/>

 <input id="button" type="button"value="提交" />
 </body>
</html>

Copier après la connexion

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";
  }
}

Copier après la connexion

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>

Copier après la connexion

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.