SSH2项目 LoginDemo 添加 AJAX

By RoyAkon on 2011年1月11日

在前一篇教程中 Netbeans 整合 Struts2 Spring3 Hibernate3 登录演示，我们做了一个完整的基于 SSH2 的登录演示。
这篇教程，我们将为它加入 AJAX 方式的登录演示。

Struts2 对 AJAX 的支持是很方便的。加入 AJAX 只需要做非常小的改动即可。这篇教程中所提到的修改，均基于 LoginDemo项目。

具体步骤如下：

库文件依赖，为 Struts2 添加 AJAX 支持需要几个库文件包：
- json-lib-2.1.jdk15.jar
- struts2-json-plugin-2.2.1.1.jar
- struts2-jquery-plugin-2.5.0.jar
以上几个包我直接加入到 netbeans 的 struts2 库中，方便引用。

修改 Action 类 LoginAction.java 添加 JSON 格式的返回值。

package com.track2web.demo.action;

import com.opensymphony.xwork2.ActionSupport;
import com.track2web.demo.entity.User;
import com.track2web.demo.service.IUserService;

public class LoginAction extends ActionSupport {

    private User user;
    private IUserService userService;

    public User getUser() {
        return user;
    }

    public void setUser(User user) {
        this.user = user;
    }

    public IUserService getUserService() {
        return userService;
    }

    public void setUserService(IUserService userService) {
        this.userService = userService;
    }

    /**
     * Ajax 方式所调用的 Action 方法
     * @return 返回调用成功信号
     */
    public String loginAjax() {
        //将 登录信息保存至 user 属性，如果校验失败，user 属性值为 NULL
        this.user = this.userService.login(user);
        return SUCCESS;
    }

    /**
     * 普通登录方式调用的 ACTION 方法
     * @return
     */
    @Override
    public String execute() {
        //将 登录信息保存至 user 属性，如果校验失败，user 属性值为 NULL
        this.user = this.userService.login(user);
        if (user!=null) {
            return SUCCESS;
        }
        else {
            return ERROR;
        }
    }
}

修改 struts.xml 配置文件，为 AJAX 方式登录添加 action 映射

<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
    <!-- 普通方式登录 -->
    <package name="login-demo" extends="struts-default">
        <action name="loginAction" class="LoginAction">
            <result name="success">/success.jsp</result>
            <result name="error" type="redirect">/index.jsp</result>
        </action>
    </package>

    <!-- AJAX方式登录 注意 extends 自 json-default 时 result 的 type 值才有 json 类型-->
    <package name="login-ajax" extends="json-default">
        <!-- method 指定了 请求 Action 中哪个具体方法-->
        <action name="loginAjax" class="LoginAction" method="loginAjax">
            <!-- 返回值类型为 json -->
            <result type="json">
                <!-- 序列化 json 值时，不包括 NULL 值 属性-->
                <param name="excludeNullProperties">
                <!-- 序列化 json 值时，不包括 的属性，userSerive 为 Spring 注入属性-->
                <param name="excludeProperties">
                    userService
                </param>
            </result>
        </action>
    </package>

</struts>

修改前端页面 index.jsp 添加 AJAX 登录

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!-- 添加 jquery tag 库 -->
<%@taglib prefix="sj" uri="/struts-jquery-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- 添加 JQUERY 库的 JS 库文件包含 -->
        <sj:head locale="zh_CN" jqueryui="true" />
        <!-- AJAX 方式登录 callback 函数响应，可以写至专门的 JS 文件 -->
        <script type="text/javascript">
                //当成功执行 ACTION 返回 JSON 值后的 CALLBACK
                $.subscribe("success", function(event) {
                    //判断如果返回值中不存在 user 对象，输出 登录失败！否则输出登录成功！
                    if (typeof(event.originalEvent.data.user)=="undefined") {
                        $("#result").html("Sorry! Login Fail! Please try argin.");          
                    }
                    else {
                        $("#result").html("Welcome! Login Successful!");
                    }
                });
        </script>
        <title>Login Demo</title>
    </head>
    <body style="text-align:center;">
        <!--普通登录方式 同原来的例子没有区别，只是加入了点CSS-->
        <s:div cssStyle="border:#000000 solid 1px;width:400px;margin:0 auto;">
            <span style="display:block;text-align:center;">Login Action Demo</span>
            <s:form action="loginAction" method="post" namespace="/login-demo" cssStyle="margin:0 auto;text-align:center;">
                <s:textfield name="user.userName" label="USERNAME" />
                <s:password name="user.userPass" label="USERPASS" />
                <s:submit value="Login Action" />
            </s:form>
        </s:div>
        <br />
        <!-- AJAX 方式登录 -->
        <s:div cssStyle="border:#000000 solid 1px;width:400px;margin:0 auto;">
            <span style="display:block;text-align:center;">Login AJAX Demo</span>
            <s:form action="loginAjax" method="post" namespace="/login-ajax" cssStyle="margin:0 auto;text-align:center;">
                <s:textfield name="user.userName" label="USERNAME" />
                <s:password name="user.userPass" label="USERPASS" />
                <!--
                    使用了 jquery 标签库的 submit 标签
                    targets - 登录后信息回显目标
                    onSuccessTopics - ACTION 执行成功返回 JSON 后调用的 callback 句柄
                    dataType - 定义 ACTION 返回值类型为 json
                -->
                <sj:submit value="Login AJAX" targets="result" onSuccessTopics="success" dataType="json" />
            </s:form>
            <!-- AJAX方式登录，信息回显目标元素 -->
            <span id="result" ></span>
        </s:div>
    </body>
</html>