struts2框架通过jQuery实现AJAX应用

浏览数：61 / 时间：2015年06月09日

众所周知，在web2.0时代，哪个web框架要是不跟AJAX沾点边，都不好意思说自己的框架有多么多么NB，当然struts也不例外，从struts1开始到现在的struts2也都对AJAX有支持。AJAX的传输过程中的数据格式有很多（eg：xml，html，纯文本，json），在这里所演示的是通过json格式来传输。有的朋友可能看多相关的技术博客，有的是通过struts2的插件(e.g., JSON plugin, jQuery plugin）来实现的，这种方法从理论上来说肯定开发效率要高些，但是针对一些从来没有接触过AJAX的开发人员来说，理解起来有点难，而笔者是在struts2的基本jar上，通过json-lib.jar来当做java对象和json对象的桥梁，前端的网页时用的jQuery实现AJAX的收发。

笔者构建项目是通过Maven来创建的，项目所需的依赖如下：

pom.xml:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.hzc</groupId>
    <artifactId>struts_2400_AJAX_jQuery</artifactId>
    <packaging>war</packaging>
    <version>0.0.1-SNAPSHOT</version>
    <name>struts_2400_AJAX_jQuery Maven Webapp</name>
    <url>http://maven.apache.org</url>
    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.4</version>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.apache.struts</groupId>
            <artifactId>struts2-core</artifactId>
            <version>2.3.16</version>
        </dependency>

        <dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.4</version>
            <classifier>jdk15</classifier><!-- 获取json-lib的jar包，必须要指定jdk，是需要区分jdk版本的 -->
        </dependency>

    </dependencies>
    <build>
        <finalName>struts_2400_AJAX_jQuery</finalName>
    </build>
</project>

首我们把思路理一下，试想client对xxx.action发送一个请求，需要将一个java对象传输到client，struts2根据struts.xml的配置帮我们截获到这个请求，执行execute()方法，一般情况我们是返回一个页面，但是要做到AJAX就不能进行页面的跳转，所以就通过I/O来输出。struts.xml：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
    "http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>

    <!-- Add packages here -->
     <constant name="struts.devMode" value="true" /><!--这个标签是设置struts2为debug模式，随时更新改变的编码-->
    
    <package name="registration" namespace="/" extends="struts-default">
        <action name="login" class="com.hzc.action.UserAction">
            <result type="stream">
                <param name="contentType">text/html</param>
                <param name="inputName">inputStream</param>
            </result>
        </action>
    </package>

</struts>

指定result的类型为stream，并配置stream的相关参数，需要说明的是<param name="inputName">inputStream</param>，inputStream是action中的成员变量，我们输出的json数据，就是到这个对象中。

UserAction.java：

package com.hzc.action;

import java.io.ByteArrayInputStream;
import java.io.InputStream;

import net.sf.json.JSONObject;

import com.hzc.model.User;
import com.opensymphony.xwork2.ActionSupport;

public class UserAction extends ActionSupport {
    
    private String jsonStr;
    private User user;
    private InputStream inputStream;
    
    public String getJsonStr() {
        return jsonStr;
    }

    public void setJsonStr(String jsonStr) {
        this.jsonStr = jsonStr;
    }

    public User getUser() {
        return user;
    }

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

    public InputStream getInputStream() {
        return inputStream;
    }

    public void setInputStream(InputStream inputStream) {
        this.inputStream = inputStream;
    }

    @Override
    public String execute() throws Exception {
        //System.out.println(user.getId());
        JSONObject myjJsonObject = new JSONObject().fromObject(jsonStr);
        System.out.println( JSONObject.toBean(myjJsonObject, User.class));
        User user = new User();
        user.setName("hzc");
        user.setAge(22);
        JSONObject jsonObject = new JSONObject().fromObject(user);
        inputStream = new ByteArrayInputStream(jsonObject.toString().getBytes("UTF-8"));
        return SUCCESS;
    }

}

对于jsonStr这个变量先不要管它，后面再说！

user这个对象先把转换为json字符串（），JSONObject jsonObject = new JSONObject().fromObject(user); 在调用toString()方法就可以往我们创建好的inputStream写json字符串了，当然最后别忘了return SUCCESS;

json输出字符串:{"age":22,"id":0,"name":"hzc"}

在前端，网页通过jquery的底层的$.ajax（）方法来发送json到服务器，然后服务器根据前端传来的数据进行相关的业务逻辑，最后再把结果以json字符串输出。在ajax函数中success：就是回调成功后执行的方法，这里只是简单的把服务器传来的json解析后，填充到文本框中！

$(document).ready(function() {
    $("#sendButton").click(function() {
        var jsonAttr = $("#userName").attr(‘name‘);
        var jsonData = $("#userId").val();
      
        $.ajax({
            type : "post",
            url : "http://192.168.80.1:8080/struts_2400_AJAX_jQuery/login.action",
            data : "jsonStr={‘id‘:"+jsonData+"}",
            success : function(msg) {
                var jsonObject = $.parseJSON(msg);
                $("#userName").attr(‘value‘, jsonObject[jsonAttr]);
            },
            error : function(e) {
                alert(e);
            }
        });
    });

});

<body>
        id:<input type="text" id="userId" /><button id="sendButton">ajax</button><br/>
        name:<input type="text" name="name" id="userName"/>
  </body>