SSH+Jquery+Ajax-Framework-Integration-js-Tutorial-php.cn

SSH+Jquery+Ajax-Framework-Integration

亚连

Freigeben： 2018-05-24 15:43:48

Original

2370 Leute haben es durchsucht

Dieser Artikel stellt Ihnen die Implementierung einer teilweisen Aktualisierung basierend auf der SSH+Jquery+Ajax-Integration vor.

Nachdem sie kürzlich die Integration von SSH2 (Struts2+Spring+Hibernate) kennengelernt haben, Ich habe versucht, eine Anmeldeschnittstelle zu schreiben, habe jedoch festgestellt, dass die Wirkung der Seite nicht sehr gut ist, wenn ich nur struts2 verwende, um zur Seite zu springen, und es auch unmöglich ist, eine teilweise Aktualisierung durchzuführen (dh eine asynchrone Übermittlungsüberprüfung). .

Also begann ich, im Internet nach Lösungen zu suchen. Einige sagten, dass der Effekt durch einen versteckten Iframe erzielt werden könnte, aber ich fand es immer mühsam und unpraktisch. Später fragte ich den Lehrer und sagte mir, dass die Verwendung von Ajax den gewünschten Effekt erzielen kann. Ich habe auch festgestellt, dass es im Internet viele Beispiele für Ajax gibt, aber die Integration von SSH2 (integriert) und Ajax (Ajax verwendet) fehlt jQuery-Framework).

Erzählen Sie mir von dem gewünschten Effekt:

Klicken Sie auf der Anmeldeseite auf „Senden“, um eine Hintergrundüberprüfung durchzuführen.

Wenn die Überprüfung erfolgreich ist, springen Sie zu index.Jsp;

Wenn die Überprüfung fehlschlägt, wird auf dieser Anmeldeseite ein jQuery-Skript ausgeführt, um den Benutzer aufzufordern

Erforderliche Pakete:

Zusätzlich zu den von SSH2 verwendeten Paketen: Pakete von Struts2 sind ebenfalls erforderlich:

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

Okay, beginnen Sie mit der Veröffentlichung des Codes:

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>

Nach dem Login kopieren

Konto:

Passwort:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt, ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

Formularelemente durch Erstellen von AJAX-Parametern in JSON konvertieren

Ajax-asynchrones Anforderungs-JSON-Format, implementiert in SpringMVC-Umgebungsdaten

Ajax-Rückruf zum Öffnen eines neuen Formulars, um das Abfangen des Browsers zu verhindern. Effektive Methode_AJAX-bezogen

Das obige ist der detaillierte Inhalt vonSSH+Jquery+Ajax-Framework-Integration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!