Struts2结合Ajax实现登录

前言：Struts2作为一款优秀的MVC框架，和Ajax结合在一起，用户就会有良好的体验，本篇博文我们来模拟一个简单的登录操作，实现Ajax的异步请求，其中Struts2进行的是链接处理，Action动态处理请求，Ajax负责进行异步处理，传送数据与返回数据，其中主要使用的技术有：struts2+Ajax+Jquery+Css,好吧，废话不多说，让我们来看看这个实例吧。

第一步：新建一个Dynamic web project,然后起名：Struts2Ajax,引入相关的jar包，在web.xml文件中配置struts2的filter.我们都知道新的请求首先进入的.xml文件，所以配置上过滤器，这样请求就会自动进入交给struts2处理了。

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <display-name>Struts2Ajax</display-name>
    <filter>
        <filter-name>struts2</filter-name>
        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

第二步：我们来配置Struts2的配置文件，其中主要是配置Action，也就是请求过来交给谁进行处理，注意这里的result Type="stream"是io中流的方式，它输出的是二进制数据，我们的contentType是html文件，它最终会返回页面以html的形式出现在页面下角

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
    <package name="StrutsAjax" extends="struts-default">
        <action name="login"  class="com.wyq.Action.LogAction">
            <result type="stream" name="success">
            <param name="cotentType">text/html</param>
            <param name="inputName">result</param>
            </result>
        </action>
    </package>
</struts>    

　　第三步：我们新建一个包，起名com.wyq.Action，主要是来存放请求的Action。新建类，LoginACtion,代码如下：

package com.wyq.Action;
 
import java.io.ByteArrayInputStream;
import java.io.InputStream;
 
import com.opensymphony.xwork2.Action;
 
public class LogAction implements Action{
 
    private String user;
 
    private String pass;
 
    private InputStream inputStream;
 
    public String getUser() {
        return user;
    }
 
    public void setUser(String user) {
        this.user = user;
    }
 
    public String getPass() {
        return pass;
    }
 
    public void setPass(String pass) {
        this.pass = pass;
    }
 
    public void setInputStream(InputStream inputStream) {
        this.inputStream = inputStream;
    }
 
    public InputStream getResult() {
        return inputStream;
    }
 
    @Override
    public String execute() throws Exception {
 
        String sus="恭喜你，登录成功！";
         
        String fail="对不起，用户名和密码不匹配";
 
        inputStream=user.equals("wangyongqiang")&&pass.equals("123")?new ByteArrayInputStream(sus.getBytes("UTF-8")):new ByteArrayInputStream(fail.getBytes("UTF-8"));
         
        return SUCCESS;
    }
 
}

　　第四步：我们来编写请求的页面，loginForm.jsp，其中要引入Jquery框架，使用到css，这里为了方便起见，我采用的方式是引入一个互联网中的jquery资源，然后借助于Jquery的Ajax，实现异步请求

<%@ page contentType="text/html; charset=GBK" language="java" errorPage="" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>使用stream结果实现Ajax</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"
      type="text/javascript">
    </script>
</head>
<body>
<s:form id="loginForm">
    <s:textfield name="user" label="用户名"/>
    <s:textfield name="pass" label="密码"/>
    <tr><td colspan="2">
    <input id="loginBn" type="button" value="提交"/>
    </td></tr>
</s:form>
 
<div id="show" style="display:none;">
</div>
<script type="text/javascript">
    // 为id为loginBn的按钮绑定事件处理函数
    $("#loginBn").click(function()
    {
        $("#show").hide();
        // 指定向login发送请求，以id为loginForm表单里各表单控件作为请求参数
        $.get("login" , $("#loginForm").serializeArray() , 
            // 指定回调函数
            function(data , statusText)
            {
                $("#show").height(30)
                    .width(400)
                    .css("border" , "1px solid black")
                    .css("border-radius" , "10px")
                    .css("background-color" , "#efef99")
                    .css("color" , "#ff0000")
                    .css("padding" , "20px")
                    .empty();
                $("#show").append("登录结果：" + data + "<br />");
                $("#show").show(2000);
            },
            // 指定服务器响应为html
            "html");
    });
</script>
</body>
</html>