【Java EE （Struts2 + Spring + Hibernate）开发】：Struts2（二）之【Ajax 支持】

【Java EE （Struts2 + Spring + Hibernate）开发】：Struts2（二）之【Ajax 支持】
本文地址：http://blog.csdn.net/shanglianlm/article/details/50096121

1 使用 stream 类型的 Result 实现 Ajax

public class LoginAction    implements Action{    //封装请求参数的两个属性    private String user;    private String pass;    //封装输出结果的二进制流    private InputStream inputStream;    ... ...    public InputStream getResult()    {        return inputStream;    }    public String execute()         throws Exception     {        //判断用户名、密码，生成对应的响应        inputStream = user.equals("crazyit.org") && pass.equals("leegang")            ? new ByteArrayInputStream("恭喜你，登录成功!"                .getBytes("UTF-8"))            : new ByteArrayInputStream("对不起，用户名、密码不匹配！"                .getBytes("UTF-8"));        return SUCCESS;    }}

<action name="loginPro" class="org.crazyit.app.action.LoginAction">    <result name="success" type="stream">        <!-- 指定下载文件的文件类型 -->        <param name="contentType">text/html</param>        <!-- 指定由getResult()方法返回输出结果的InputStream -->        <param name="inputName">result</param>    </result>    <!-- 定义一个名为login的结果 -->     <result name="login">/WEB-INF/content/login.jsp</result></action>

<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()    {        //指定向loginPro发送请求，以id为loginForm表单里各表单控件作为请求参数        $.get("loginPro" , $("#loginForm").serializeArray() ,             //指定回调函数            function(data , statusText)            {                $("#show").height(80)                    .width(300)                    .css("border" , "1px solid black")                    .css("background-color" , "#efef99")                    .css("color" , "#ff0000")                    .css("padding" , "20px")                    .empty();                $("#show").append("登录结果：" + data + "<br />");                $("#show").show(2000);            },            //指定服务器响应为html            "html");    });</script>

2 JSON 的基础知识

JSON 主要有两种数据结构：

2-1 使用 JSON 语法创建对象

object = {  propertyName1:propertyValue1,  propertyName2:propertyValue2,  ...}

例：

person = {  name:'yeeku',  sex:'male',  // 使用 JSON 语法为其指定一个属性  son:{      name:'nono',      grade:1  }  // 使用 JSON 语法为 person 直接分配一个方法  info:function(){    document.writeln("姓名：" + this.name + "性别：" + this.sex);  }}

2-2 使用 JSON 语法创建数组

arr = [value1, value2, ... ]

例如：

person = {   name:'yeeku',   gender:'male',   age:29}

写成 XML 格式

<person>  <name>yeeku</name>  <gender>male</gender>  <age>29</age></person>

明显 JSON 比 XML 更简洁。

3 实现 Action 逻辑

假设输入页面有三个表单域，对应三个请求参数，因此应该使用 Action 类封装这三个请求参数（field1, field2, field3）。

public class JSONExample{    //模拟处理结果的属性    private int[] ints = {10, 20};    private Map<String , String> map        = new HashMap<String , String>();    private String customName = "顾客";    //封装请求参数的三个属性    private String field1;    //'transient'修饰的属性不会被序列化    private transient String field2;    //没有setter和getter方法的字段不会被序列化    private String field3;    public String execute()    {        map.put("name", "疯狂Java讲义");        return Action.SUCCESS;    }    //使用注释语法来改变该属性序列化后的属性名    @JSON(name="newName")    public Map getMap()    {        return this.map;    }    //customName属性的setter和getter方法    public void setCustomName(String customName)    {        this.customName = customName;    }    public String getCustomName()    {        return this.customName;    }    ... ...}

4 JSON 插件与 json 类型的 Result

<struts>    <constant name="struts.i18n.encoding" value="UTF-8"/>    <package name="example"  extends="json-default">        <action name="JSONExample" class="org.crazyit.app.action.JSONExample">            <!-- 配置类型的json的Result -->            <result type="json">                <!-- 为该Result指定参数 -->                <param name="noCache">true</param>                <param name="contentType">text/html</param>                <!-- 设置只序列Action的map属性 -->                <!--  param name="root">map</param -->            </result>        </action>        <action name="*">            <result>/WEB-INF/content/{1}.jsp</result>        </action>    </package></struts>

5 实现 JSP 页面

<head>    <title>使用JSON插件</title>    <script src="${pageContext.request.contextPath}/prototype-1.6.1.js"     type="text/javascript">    </script>    <script type="text/javascript">        function gotClick()        {            //请求的地址            var url = 'JSONExample.action';            //将favorite表单域的值转换为请求参数            var params = Form.serialize('form1');            //创建Ajax.Request对象，对应于发送请求            var myAjax = new Ajax.Request(            url,            {                //请求方式：POST                method:'post',                //请求参数                parameters:params,                //指定回调函数                onComplete: processResponse,                //是否异步发送请求                asynchronous:true            });        }        function processResponse(request)        {            //使用JSON对象将服务器响应解析成JSON对象            var res = request.responseText.evalJSON();            alert(res);            //遍历JSON对象的每个属性            for(var propName in res)            {                $("show").innerHTML += propName + " --> "                     + res[propName] + "<br/>";            }               }       </script></head><body><s:form id="form1">    <s:textfield name="field1" label="Field 1"/>    <s:textfield name="field2" label="Field 2"/>    <s:textfield name="field3" label="Field 3"/>    <tr><td colspan="2">    <input type="button" value="提交" onclick="gotClick();"/>    </td></tr></s:form><div id="show"></div></body>