美文网首页web
【Java Web】JQuery ajax提交表单到Struts

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

作者: wuchaooooo | 来源:发表于2016-10-24 15:44 被阅读1254次

    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>
    

    相关文章

      网友评论

        本文标题:【Java Web】JQuery ajax提交表单到Struts

        本文链接:https://www.haomeiwen.com/subject/jnjluttx.html