使用json取代传统的form提交

        传统的html提交在处理复杂对象的编辑时显得力不从心,结构性的数据在经过后台jsp或者asp处理，展示为前台的html表单后，成为平面型的form的input，这样，当form提交到后台，服务不得不重新将平面型的构造为结构性数据，以进行后续的处理。
         在采用O/R mapping的应用中，这样的展示方式成为开发工作的瓶颈。
        WebRPC能够实现结构化数据在B/S之间的双向序列化，主流的实现如DWR，jsonRPC都提供了java对象——js对象之间的双向序列化。
    本文以jsonRPC与Ext2.0结合，通过以下步骤验证了用结构化数据取代传统form形式的可行性。

1. 将多个java对象序列化到Browser的js对象（json格式)
2. 将json格式的js对象与Ext form进行绑定
3. Ext界面组件负责交互，编辑数据
4. 编辑结果更新到js对象
5. js对象提交到后台，反序列化为java对象

关键代码如下：
1.java对象序列化为json格式

java 代码

static public String format(Object o) throws Exception{
    JSONSerializer ser = new JSONSerializer();
    ser.registerDefaultSerializers();
    SerializerState state = new SerializerState();
    JSONRPCResult result = new JSONRPCResult(JSONRPCResult.CODE_SUCCESS,
                   new Integer(1), ser.marshall(state, o));
    return result.toString();
}

2.json格式到Browser后，调用eval,形成js对象

js 代码

var jo;
 try {
 eval('jo = <%=dt.format(dt.getDefaultObjs()) %>');
 } catch(e) {
 throw new JSONRpcClient.Exception(550, "error parsing result");
 }

3.js对象与Ext组件绑定

js 代码

function jsonload(fm, m){
    fm.obj = m;
    for(x in m){
        var fld = fm.find('name',x);
        if(fld.length==1)
          fld[0].setValue(m[x]);
    }
}

4.Ext组件编辑结果更新

js 代码

function jsonupdate(fm){
    if(!fm.obj) return;
    var m=fm.obj;
    for(x in m){
        var fld = fm.find('name',x);
        if(fld.length==1)
          m[x]=fld[0].getValue();
    }
}

5.js对象序列化为json字符串，并提交

js 代码

var jostr = toJSON(jo);
var el = Ext.getDom("jostr");
el.value=jostr;
var fm = Ext.getDom("fm1");
fm.submit();

6.json字符串反序列化为java对象

java 代码

static public Object parse(String s) throws Exception{
    JSONObject jo =  new JSONObject(s);
    JSONSerializer ser = new JSONSerializer();
    ser.registerDefaultSerializers();
    SerializerState state = new SerializerState();
    Object result= ser.unmarshall(state, null, jo.get("result"));
    return result;
}

页面是修改Ext2.0范例 examples\form\dynamic.html形成的，只保留了其中的tab-form示例用于多个对象的编辑
涉及的jsonRPC、Ext库(2.0)请自行下载

评论

2 楼 chen4w 2007-11-29  

已经实现了，增加到该贴子的附件中了。
从服务器下载整个文件夹当然是可以实现的，可以将文件夹压缩之后形成一个单一文件，走标准的http请求，但是考虑到周期比较长，应提供进度显示

1 楼 tigershuang 2007-11-28  

楼主你好，
拜读过你的“用Ext编写的远程文件管理 ”帖子，感觉效果相当好。

不过你也提到：
远程文件选择(单选,待实现)
远程目录选择（单选,待实现）

不知道楼主实现了没有。

还有，有没有可能实现从服务器下载整个文件夹？如果可能能否赐教，谢谢！