struts2 中json使用体验

   在页面跳转用户体验设计时，让我们讨论了一个下午。最后采用一个试用方案，用ajax异步实现，通过json传输数据。这样对原来的业务逻辑改动很少，这里我们使用的是struts2，大多工作是修改配置文件。来看看我做的一个demo。
   准备：在原来的struts2的基础上只有添加jsonplugin.jar插件就可以了.算是安装吧。
   修改配置：
       在struts.xml文件中：
       修改前：
       <package name="default" extends="struts-default">
          <interceptor-stack name="rootAdminOnly">
               .....
               .......       
          </interceptor-stack>
          <action name="templateDelete" class="com.reyosoft.app.webapp.action.BotTemplateAction" method="delete">
              <interceptor-ref name="rootAdminOnly"/>
              <result name="success" type="redirect-action">templateList</result>
          </action>
          ...
          ......
        修改后：
     <package name="default" extends="struts-default">
          <interceptor-stack name="rootAdminOnly">
               .....
               .......       
          </interceptor-stack>
          ...
          ......
     <package name="json"  extends="json-default,default">
        <action name="templateDelete" class="com.reyosoft.app.webapp.action.BotTemplateAction" method="delete">
            <interceptor-ref name="rootAdminOnly"/>
            <result type="json"/>
        </action>
     </package>
    从修改的结果我们知道，修建了一个包json，因为这个包需要继承json-default包，另外我们这里还继承了default包，是因为我们需要调用default包中我们定义的拦截器。
    我们的处理结果转向视图修改为了json，
    代码修改：
      我们在基类中BaseAction定义了一个json返回消息
     /** msg for json */
    protected String jsonMsg;
   
    public String getJsonMsg() {
        return jsonMsg;
    }

    public void setJsonMsg(String jsonMsg) {
        this.jsonMsg = jsonMsg;
    }
     在具体类中，BotTemplateAction中，重载了父类方法。

    public String getJsonMsg() {
        return super.jsonMsg;
    }
    这么做到的道理：json插件默认情况下不支持父类属性方法。
   JS修改：
/**
* wrap message with label 'div' make them show like old.
*/
function wrapMsg(msg){
    var rt =  '<div class=message id=successMessages>'
            + ' <img src="images/iconInformation.gif"  alt="icon.information" class="icon" />    '
            + msg
            + '</div>';
    return rt;
}

/**
* json call action operation.
* @param fid the form id
* @param url the form action
* @param  cur the curent dom element
*/
function remove(fid, url, cur){
  var params = $("#"+fid).formToArray();
  $.ajax({
         url: url,
         type: 'POST',
         dataType: 'html',
         timeout: 1000*60,
         data: params,
         error:    function(){alert('Sorry! Server doesn/'t work well or request time out!');},
         success:  function(data){
              //convert string to json object
              var json=eval('('+data+')');
              //filter
              if(json.showFlag == "0")
                 $(cur).parent().parent().animate({opacity:'hide'},"slow");
              // show msg
              $("#msg").html("").append(wrapMsg(json.jsonMsg));
        }
    });
}
   HTML修改：
    <a target="_self" href="#"
       onclick="remove('f1','templateDelete.html?templates.id=${id }',this);return false"> 
   这里‘href’属性我们用了“#”，最好用javascript:;  或者 javascript:void(0);但这里也无所谓了，因为在onclick中我加了return false，在ie和ff测试通过。url后面也无“#”