使用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 代码

 

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

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

js 代码

 

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

3.js对象与Ext组件绑定

js 代码

 

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

4.Ext组件编辑结果更新

js 代码

 

1. function jsonupdate(fm){  
2.     if(!fm.obj) return;  
3.     var m=fm.obj;  
4.     for(x in m){  
5.         var fld = fm.find('name',x);  
6.         if(fld.length==1)  
7.           m[x]=fld[0].getValue();  
8.     }  
9. }  

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

js 代码

 

1. var jostr = toJSON(jo);  
2. var el = Ext.getDom("jostr");  
3. el.value=jostr;  
4. var fm = Ext.getDom("fm1");  
5. fm.submit();  

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

java 代码

 

1. static public Object parse(String s) throws Exception{  
2.     JSONObject jo =  new JSONObject(s);  
3.     JSONSerializer ser = new JSONSerializer();  
4.     ser.registerDefaultSerializers();  
5.     SerializerState state = new SerializerState();  
6.     Object result= ser.unmarshall(state, null, jo.get("result"));  
7.     return result;  
8. }  

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