SSH+Jquery+Ajax framework integration-JS Tutorial-php.cn

SSH+Jquery+Ajax framework integration

亚连

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

Original

2370 people have browsed it

This article introduces to you the implementation of partial refresh based on SSH Jquery Ajax integration. Interested friends should read this article together

After recently learning the integration of SSH2 (Struts2 Spring Hibernate), I started to try to write A login interface, and it was found that if you only use struts2 to jump to the page, the effect of the page will not be very good, and partial refresh (that is, asynchronous submission verification) will not be possible.

So, I started searching for solutions on the Internet. Some said that the effect could be achieved through a hidden iframe, but I always found it troublesome and impractical. Later, I asked the teacher and told me that using ajax can achieve the desired effect. I also found that there are many examples of ajax on the Internet, but what is missing is the integration of SSH2 (integrated) and ajax (ajax uses the jQuery framework ).

Talk about the effect I want:

Click submit on the login page to perform background verification;

Jump to index.Jsp upon successful verification;

If verification fails, a jQuery script will be executed on this login page to prompt the user;

Required packages:

In addition to the packages used by SSH2, the following packages of struts2 are also required:

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, start posting the code:

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>

Copy after login

Account:

Password:

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

Copy after login

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

Copy after login

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>

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Convert form elements to JSON by constructing AJAX parameters

Ajax asynchronous request JSON format implemented in SpringMVC environment Data

Ajax callback to open a new form to prevent browser interception effective method_AJAX related

The above is the detailed content of SSH+Jquery+Ajax framework integration. For more information, please follow other related articles on the PHP Chinese website!