web

【Java Web】JQuery ajax提交表单到Struts

2016-10-24  本文已影响1254人  wuchaooooo

HTML代码

//如果使用<input>当作表单提交按钮,按照下面这么写,两者选其一
<form id="accountForm">    
//注意这里input的name和action获取前端数据有关,所以必须对应起来.
<input id="username" name="username" type="text">    
<input id="password" name="password" type="password">    
<input id="submitButton" type="button" value="登录">
</form>

//如果使用<button>当作表单提交按钮,按照下面这么写,两者选其一
<form id="accountForm">    
//注意这里input的name和action获取前端数据有关,所以必须对应起来.
<input id="username" name="username" type="text">    
<input id="password" name="password" type="password">    
<form>
<button  id="submitButton">登陆</button>

//<form>标签里面不应该使用<button>标签!!!!
.....
<script>    
  $(document).ready(function () {
    $("#submitButton").click(function () {            
      var username = $("#username").val();            
      var password = $("#password").val();            
      if (username == "" || password == "") {                
        alert("用户名和密码不能为空,请重新输入");                
        $("#username").val("");                
        $("#password").val("");            
      } else {                
          $.ajax({                    
            type:"post",                    
            url:"login",
            //将表单内容序列化成一个字符串,如下:username=wwc&password=wwc,如果是post请求,那么这串字符串就以请求体的方式传递给后端action                    
            data:$("#accountForm").serialize(),                    
            datatype:"json",                    
            success:function (data) {                        
              var d = eval("(" + data + ")");                        
              if (d.login == "success") {                        
                window.location.href = "index.html";                        
              } else if (d.login == "false") {                            
                  alert("用户名或密码错误 \r 请重新输入");                            
                  $("#username").val("");                            
                  $("#password").val("");                        
              }                    
            },                    
            error:function () {                        
              alert("系统异常");                    
            }                
        });            
      }        
    });    
  });
</script>

Action代码

public class LoginAction extends ActionSupport implements ModelDriven {    
  private UserService userService;
  //这个result字符串是在struts.xml里配置的action的返回结果,必须对应.    
  private String result; 
  //必须提供result字符串的get方法,否则前端无法获取数据.   
  public String getResult() {        
    return result;    
  }
  //这是利用spring框架将userService注入到LoginAction中,并赋值为LoginAction的属性。(虽然与ajax提交表单没有直接联系,但是在整个程序中用到,所以贴一下.)    
  public void setUserService(UserService userService) {          
    this.userService = userService;    
  }    
  //模型驱动
  //这里会有一个User类,并且User类用有String username和String password两个属性,这两个的属性名和表单中input标签的name必须相同!!!   
  private User user = new User();    
  public Object getModel() {        
    return user;    
  }    
  @Override    
  public String execute() throws Exception {
  //判断该用户在数据库中是否存在
    boolean checkUser = userService.checkUser(user.getUsername(), user.getPassword());        
    if (checkUser) {
      //返回给前台ajax的数据,为什么result知道返回给ajax呢?这个在struts.xml中会给出答案            
      result = "{\"login\":\"success\"}";        
    } else {            
        result = "{\"login\":\"false\"}";        
    }  
    return "success";    
  }
}

User类代码

//用struts2框架,必须提供空构造方法和属性的get、set方法
public class User {    
  private Integer id;    
  private String username;    
  private String password;    

  public User() {}
    
  public User(String username, String password) {        
    this.username = username;       
    this.password = password;    
  }    

  public Integer getId() {        
    return id;    
  }    
  public void setId(Integer id) {        
    this.id = id;    
  }    

  public String getUsername() {        
    return username;    
  }    
  public void setUsername(String username) {        
    this.username = username;    
  }    

  public String getPassword() {        
    return password;    
  }    
  public void setPassword(String password) {        
    this.password = password;    
  }
}

struts.xml中的配置

//必须加上json-default,要使用这个标签必须引入struts2-json-plugin-2.3.15.3.jar这个包
<package name="user" extends="struts-default, json-default">     
  <action name="login" class="loginAction" method="execute">        
    <result name="success" type="json">
      //这里的result就是Action类中的那个result,必须对应         
      <param name="root">result</param>      
    </result>   
  </action>
</package>
上一篇下一篇

猜你喜欢

热点阅读