집 > 기사 > 웹 프론트엔드 > SSH+Jquery+Ajax 프레임워크 통합

SSH+Jquery+Ajax 프레임워크 통합

亚连원래의: 2018-05-24 15:43:482314검색

이 글에서는 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>

계정: ba17760f3cb4194e6ada455e737a6e40076402276aae5dbec7f672f8f4e5cc81

비밀번호: b70ef4540bd155893633a7ba33130401076402276aae5dbec7f672f8f4e5cc81

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

위는 모든 사람을 위해 편집한 내용이며, 앞으로 모든 사람에게 도움이 되기를 바랍니다.

SSH+Jquery+Ajax 프레임워크 통합

관련 기사