EXT--表单AJax提交后台，返回前端数据格式的转换

Posted 2020-06-13

前言：

前端发送请求至服务端（Java），得到的数据是Java语言对象所表现的形式，经常需要转换为JSON格式的字符串写出至前端；当前端获取后也往往需要将字符串转换为js的对象。本文描述了在EXT作为前端框架，表单异步提交的情景下这些数据格式处理。当然，此类的格式转换方法有多种，本文仅描述其中一种而已。

说明：EXT版本：3.4

 

示例：

服务端相关代码

                    //创建SubTreeVo集合
                    List<SubTreeVo> treeVos = new ArrayList<SubTreeVo>();
                    if( topleveldomianList != null && !topleveldomianList.isEmpty() ) {
                        Iterator<Ttopleveldomian> it = topleveldomianList.keySet().iterator();
                        while ( it.hasNext() ) {
                            Ttopleveldomian key = it.next();
                            SubTreeVo vo = new SubTreeVo();
                            vo.setId(key.getiDomainId());//域名id
                            vo.setName(key.getsDomainName());//域名
                            vo.setUrl(key.getsDomainUrl());//域名地址
                            vo.setUri(topleveldomianList.get(key));//域名uri
                            treeVos.add(vo);
                        }
                    }
                    try {
                        jsonStr = JSONUtil.serialize(treeVos);
                    } catch (JSONException e) {
                    }
                }//写出
                out.write("{success:true,info:‘上传成功‘,dataJson:‘"+jsonStr+"‘}");
                //...

小结：JSONUtil为org.apache.struts2.json包下的一个类--需导struts2-json-plugin-2.3.15.1.jar，其serialize方法就是将Object转换为JSON字符串。

 

前端相关代码

                        importform.getForm().submit({
                            url : ‘/uploadFileWhiteName.do?action=channelDomainImport&channelId=‘+channelId,//调用的url资源
                            method : ‘POST‘,//获取请求URL的HTTP
                            waitTitle : ‘请稍后‘,//在调用一个action的处理过程中调用的Ext.MessageBoxwait显示的标题
                            waitMsg : ‘系统正在处理 ...‘,//在调用一个action的处理过程中调用的Ext.MessageBoxwait显示的内容
                            /**
                             * 当接收到一个有效的成功返回的数据包的时候调用的回调函数。
                             * @form Ext.form.BasicForm 做出请求动作的表单
                             * @action Ext.form.Action The Action class. 
                             */
                            success : function(form, action) {
                                //获取服务器返回的数据--JSON字符串
                                var str = action.response.responseText;
                                //将JSON字符串解析成对象
                                var msg = Ext.util.JSON.decode(str);
                                //将JSON字符串解析为对象  （注：用Ext.util.JSON.decode也可以）
                                var jsObject = eval(msg.dataJson);
                                //...

小结：将JSON字符串转换为js对象有两种方式：一是用EXT的工具包的JSON类，其decode方法可将JSON字符串转换为js对象；二是调用javascript的eval方法，可将JSON字符串转换为js对象。不过调用eval方法需注意的是：如果为单对象，则需写成eval("("+data+")");的形式，具体参见我的另一篇博客：js--eval函数。