1. 程式人生 > >ajax無重新整理呼叫struts2框架中的Action,以使用者登入驗證為例

ajax無重新整理呼叫struts2框架中的Action,以使用者登入驗證為例

前提條件:搭建好SSH框架;

本功能依賴jar包:struts2-json-plugin-2.3.24(例);

步驟:1、匯入依賴jar包;2、編寫action;3、配置spring;4、配置struts.xml;5、編寫ajax指令碼;

說明:本例關鍵詞:ajax、jquery、javascript、SSH、java;

IDE環境:intellij idea;

1、匯入jar包

把下載好的struts2-json-plugin-2.3.24複製到lib資料夾下,並要在Module Setting中新增引用,不然報錯。


2、編寫action

package com.soyann.sys.login;
import com.opensymphony.xwork2.ActionContext;
import com.soyann.common.util.BaseAction;
import com.soyann.common.util.Constants;
import com.soyann.common.util.MD5;
import com.soyann.sys.user.pojo.SysUser;
import com.soyann.sys.user.service.SysUserService;
import java.util.List;

/**
 * @Title: filename
 * @Package: com.soyann.sys.login
 * @Description: ajax呼叫struts action例項
 * @Copyright: Copyright 2015 ShenZhen SOYANN Corporation
 * @Company: 
 * @author: neil
 * @date: 2015/6/22
 * @version: V1.0
 */
public class JsonLoginAction extends BaseAction {
    private static final long serialVersionUID = 8513301164650419245L;

    private SysUserService sysUserService;(注意這裡不能生成getter,否則spring注入的時候報錯)
    private String username;
    private String passwd;
    private String result;
    private SysUser sysUser;

    public SysUser getSysUser() {
        return sysUser;
    }

    public void setSysUser(SysUser sysUser) {
        this.sysUser = sysUser;
    }


    public void setSysUserService(SysUserService sysUserService) {
        this.sysUserService = sysUserService;
    }


    public String getPasswd() {
        return passwd;
    }

    public void setPasswd(String passwd) {
        this.passwd = passwd;
    }


    public String getUsername() {
        return username;
    }

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





    @Override
    public String execute() throws Exception {
        // TODO Auto-generated method stub
        try {
            List<SysUser> userList = sysUserService.getUserByLoginid(username);
            if (userList.isEmpty()) {
                super.addActionError(super.getText("login.message.failed"));
                result = "false";
            } else {
                sysUser = userList.get(0);
                if (new MD5().getMD5ofStr(passwd).equals(sysUser.getPassword())) {
                    ActionContext.getContext().getSession().put(Constants.USERNAME_KEY, username);
                    ActionContext.getContext().getSession().put(Constants.SYSUSER_KEY, sysUser);
                    result ="true";
                } else {
                    //super.addActionError(super.getText("login.message.failed"));
                    result ="false";
                }
            }
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
        return SUCCESS;
    }

    public String getResult() {
        return result;
    }



}
這裡注意execute()執行後返回為null、success都無所謂,在前臺我們只取定義的result值,這裡將會以json返回到前臺。

3、配置spring

<!-- json登入Action -->
    <bean id="jsonLoginAction" class="com.soyann.sys.login.JsonLoginAction" scope="prototype">
        <property name="sysUserService" ref="sysUserService"/>
    </bean>

4、配置struts.xml
<strong>   </strong><package name="ajax" extends="json-default">
        <action name="jsonLogin" class="jsonLoginAction">
            <result type="json"></result>
        </action>
    </package>
這裡要注意包要繼承json-default,返回型別type=json; 這樣後臺資料才能以json形式返回到前臺讀取。

5、編寫ajax指令碼


<%--
  Created by IntelliJ IDEA.
  User: neil
  Date: 2015/6/22
  Time: 17:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax呼叫struts</title>
    <script type="text/javascript" src="assets/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
</head>
<body>
<script type="text/javascript">
    jQuery(document).ready(function($){
        $("form#login").validate({
            errorClass: "error",
            errorElement: "div",
            errorPlacement: function(error, element) {
                element.after(error);
            },
            rules: {
                username: { required: true, minlength: 2},
                passwd: { required: true, minlength: 2}
            },
            messages: {
                username: { required: "必填", minlength: $.validator.format("不得少於{0}字元.")},
                passwd: { required: "必填", minlength: $.validator.format("不得少於{0}字元.")}
            },
            submitHandler: function(form)
            {

                $.ajax({
                    url: "jsonLogin.action",
                    method: 'POST',
                    dataType: 'text',
                    data: {
                        do_login: true,
                        username: $(form).find('#username').val(),
                        passwd: $(form).find('#passwd').val()
                    },
                    success: function (json) {
                        var obj = $.parseJSON(json);  //使用這個方法解析json
                        var state_value = obj.result;  //result是和action中定義的result變數的get方法對應的
                        /*alert(state_value);*/
                        if(state_value=="true"){
                            alert("true");
                        }else{
                            alert("false");
                        }
                    },
                    error: function (json) {
                        alert("json=" + json);
                        return false;
                    }
                });

            }
        });
    });
</script>
<form method="post" role="form" id="login" action="">
    <div class="form-group">
        <label for="username">Username</label>
        <input type="text"  name="username" id="username" autocomplete="off" />
    </div>

    <div class="form-group">
        <label for="passwd">Password</label>
        <input type="password"  name="passwd" id="passwd" autocomplete="off" />
    </div>

    <div class="form-group">
        <button type="submit">
            Log In
        </button>
    </div>
</form>
</body>
</html>

注意這裡有個驗證功能,需要匯入相應的js包才能執行。