文档章节

使用json取代传统的form提交

chen4w
 chen4w
发布于 2015/12/12 19:03
字数 570
阅读 36
收藏 0

        传统的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)请自行下载

© 著作权归作者所有

chen4w
粉丝 3
博文 57
码字总数 33894
作品 0
西城
架构师
私信 提问
Spring MVC @RestController接收POST请求,用Map接收

背景 脱离传统项目,使用微服务集群开发后。RestFul风格势在必行,所以,本篇文章针对使用restful风格的编写人员。 主题 restful post请求提交的参数用什么接收? 关键字 Map、Entity 内容 ...

沫沫金
2017/10/16
0
0
Android 网络框架 Retrofit

概述 Retrofit是一个OkHttp网络请求框架的封装库,Retrofit通过注解配置网络参数,可以按照我们的规则去构造实际的HTTP请求,能够灵活设置URL、头部、请求体、返回值等,是目前最优雅的一个网...

xi阳
2018/09/11
0
0
SpringBoot系列教程web篇之Post请求参数解析姿势汇总

作为一个常年提供各种Http接口的后端而言,如何获取请求参数可以说是一项基本技能了,本篇为《190824-SpringBoot系列教程web篇之Get请求参数解析姿势汇总》之后的第二篇,对于POST请求方式下...

小灰灰Blog
08/28
59
0
Django - 如何处理前端的ajax form submit 请求?通过json返回处理结果,不要重定向(redirect)

问题背景 在web应用开发中,经常遇到需要诸如用户注册提交个人信息,或者录入商品信息的需求。在浏览器上一般以一个Form表单来包含用户所有需要输入的控件。那么浏览器需要在用户输入完所有信...

fall4u
2018/01/09
0
0
axios 提交数据到 flask 的 数据格式问题

HTTP 协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。常见的四种编码方式如下: 1、application/x-www-form-urlencoded 这应该是最...

阿豪boy
2018/02/18
283
0

没有更多内容

加载失败,请刷新页面

加载更多

技术分享 | MySQL 8.0:字符集从 utf8 转换成 utf8mb4

作者:胡呈清 整理 MySQL 8.0 文档时发现一个变更:默认字符集由 latin1 变为 utf8mb4。想起以前整理过字符集转换文档,升级到 MySQL 8.0 后大概率会有字符集转换的需求,在此正好分享一下。...

爱可生
17分钟前
4
0
不管单机还是集群的限流实现已经给你准备好了

限流算法 计数器算法 维护一个counter,规定在单位时间内counter的大小不能超过最大值,每隔固定时间就将counter的值置零。如果这个counter大于设定的阈值,那么系统就拒绝请求 漏桶算法 维护...

阿提说说
28分钟前
4
0
文件管理

通过CLI登录进行文件管理 .表示当前目录,..表示父目录,具有隐藏文件。支持缩写与TAB键补全 1、目录操作 pwd#打印工作目录 cd <directory>#改变工作目录 dir [/all][<directory>]#查看目录内...

悠悠子佩
30分钟前
4
0
Netty学习笔记(10)——Netty中的Channel组件

1. Channel的功能 1. 与NIO中的Channel一样,它实现了网络操作的抽象类,聚合了一系列的网络IO功能,包括读写数据、建立连接、关闭连接等功能。通过外观模式,将数据读写、连接建立与断开等操...

江左煤郎
34分钟前
3
0
二叉树的深度

从根结点到叶结点依次经过的结点(含根、叶结点)形成树的一条路径,最长路径的长度为树的深度。 public int TreeDepth(TreeNode root) { return root == null ? 0 : 1 + Math.max(Tree...

Garphy
42分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部