ExtJS前台接收Action传递JSON数据示例

ExtJS前台接收后端JSON数据的实现方法

在ExtJS前台开发中，接收后端Action传过来的JSON数据是一个很常见的场景。今天就来聊聊具体的实现方式，顺便分享两种解析JSON的技巧。

实际示例：通过Ajax请求获取机构信息

先看一个实际例子：通过Ajax请求获取机构信息，然后填充到表单组件中。核心代码如下：

Ext.Ajax.request({
    method:'POST',
    params : {dagl_code:dagl_code},
    url:lcwPath+"/daxt/lcgl.shtmlmethod=getJgBycode",
    success: function(response, opts) {
        if(response.responseText!='{}'){
            alert(response.responseText);
            //第一种方法
            var dagl_jg = Ext.util.JSON.decode(response.responseText).dagl_jg;
            //第二种方法
            var json = eval("(" + re.responseText + ")");
            var dagl_jg= json.dagl_jg;

            var org_mc = Ext.util.JSON.decode(response.responseText).org_mc;
            var lccode = Ext.util.JSON.decode(response.responseText).lccode;
            var lcname = Ext.util.JSON.decode(response.responseText).lcname;
            Ext.getCmp("jgs").comboHidden.setValue(dagl_jg);
            Ext.getCmp('jgs').setValue(org_mc);
            Ext.getCmp('dagl_jg').setValue(dagl_jg);
            Ext.getCmp('sslc').setValue(lccode);
            Ext.getCmp('sslc').setRawValue(lcname);

            var dagl_jg = Ext.getCmp('jgs').comboHidden.getValue();
            lcStore.proxy = new Ext.data.HttpProxy({url: lcwPath + '/daxt/lcgl.shtmlmethod=getDaxx&dagl_type=L&dagl_jg=' + dagl_jg});
            lcStore.load();
            Ext.getCmp('lcbh').setValue('');
        }else{
            Ext.MessageBox.show({
                title:'提示',
                msg:config.string.NOTNUMBERMSG_OR_NUMBERLOSEEFFICACY,
                minWidth:270,
                icon:Ext.MessageBox.WARNING,
                buttons:{"ok":"关闭"},
                fn:function(e){Ext.MessageBox.hide();},
                closable:true
            });
            Ext.getCmp("jgs").setValue("");
            Ext.getCmp("lcbh").setValue("");
        }
    },
    failure: function(response, opts) {
        Ext.MessageBox.show({
            title:'系统提示',
            msg:'系统出现非预期异常',
            minWidth:270,
            icon:Ext.MessageBox.WARNING,
            buttons:{"ok":"关闭"},
            fn:function(e){Ext.MessageBox.hide();},
            closable:true
        });
    }
});

解析JSON的两种常用方法

这里需要注意解析JSON时的两种常用方法：一是用Ext.util.JSON.decode，更安全可靠；二是用eval，简单但容易被注入，生产环境建议优先使用前者。另外代码中的re变量应该是笔误，实际应该是response对象。

数据处理与流程衔接

处理完数据后，把值设置到对应的组件（如combo、textfield）中，再根据条件重新加载store，整个流程就衔接起来了。如果返回空对象，就清空相关字段并给出提示——这种异常处理思路在实际项目中很实用。