SSH2项目 LoginDemo 添加 AJAX

01/11/2011

SSH2项目 LoginDemo 添加 AJAX

在前一篇教程中 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 库中,方便引用。
    ssh2_ajax_pic1

  • 修改 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>
  • 分析前端页面配置
    • 使用 普通 方式 请求 JSON 方式的 Action 将有什么结果呢?
    • 成功返回 JSON 数据,包括 user 对象
      ssh2_login_success
      失败返回 JSON 数据,无对象
      ssh2_login_fail

    • 使用 AJAX 方式 请求 JSON 方式的 Action 的结果
    • 登录陈功
      ssh2_ajax_login_success
      登录失败
      ssh2_ajax_login_fail