2007-11-16

使用json取代传统的form提交

关键字: form tab json webRPC
        传统的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)请自行下载
  • 1dd57d0b-d55a-4d5c-8b86-bd1afd309b4c-thumb
  • 描述: 界面效果
  • 大小: 12.7 KB
  • 16b.rar (19.3 KB)
  • 描述: 相关文件
  • 下载次数: 404
评论
chen4w 2007-11-29
已经实现了，增加到该贴子的附件中了。
从服务器下载整个文件夹当然是可以实现的，可以将文件夹压缩之后形成一个单一文件，走标准的http请求，但是考虑到周期比较长，应提供进度显示
tigershuang 2007-11-28
楼主你好，
拜读过你的“用Ext编写的远程文件管理 ”帖子，感觉效果相当好。

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

不知道楼主实现了没有。

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

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

chen4w
搜索本博客
最近加入圈子
存档
最新评论