ext中对json数据的处理解析

 

ext中对json数据的处理解析

分类： Extjs 2010-10-22 19:16   4273人阅读   评论(3)   收藏   举报

json ext function autoload list action

(注:ext做客户端接收数据，返回的json数据必须要有存放载体,也就是ext中的Ext.data.Store)

 1、Ext.form.ComboBox() 控件:(将json格式数据信息显示到下拉框中)
说明:本例采用的json.jar 2.2.1-version(下同)
前台:

[javascript]   view plain copy

1. var combobox = new Ext.form.ComboBox({  
2.  id:'type',  
3.  name:"type",  
4.  editable:false,  
5.  readOnly:true,  
6.  mode:'remote',  
7.  emptyText:"请选择",  
8.  store:new Ext.data.Store({  
9.   proxy: new Ext.data.HttpProxy({  
10.    url: 'TestAction!test.action'//请求路径  
11.   }),  
12.   reader: new Ext.data.JsonReader({  
13.    root: 'rows',  
14.    totalProperty: 'results',  
15.    fields:['code','desc']  
16.   }),  
17.   autoLoad:true  
18.  }),  
19.  valueField:'code',  //逻辑列名的实际值(tId)  
20.  displayField:'desc', //逻辑列名的显示值(tName)  
21.  triggerAction:'all', //是否开启自动查询可选:all(不开启)、query(开启)  
22.  labelSeparator:'',  
23.  width:120  
24. });    

后台：

[java]   view plain copy

1. List<Obj> list = testService.loadType(condition);//这是方法返回的list数据,根据需要而定,在此这是举例说明问题.  
2.   
3. JSONObject json = new JSONObject();  
4. JSONArray jsonObjects = new JSONArray();  
5.   
6. int i=0;  
7. Iterator<Obj> it = list.iterator();  
8.   
9. while(it.hasNext()){  
10.  JSONObject jsonObject = new JSONObject();  
11.  Obj obj = it.next();//这里的Obj对象只是list中的存放的对象类型  
12.   
13.  jsonObject.put("desc", obj.getTypeDesc());  
14.  jsonObject.put("code", obj.getTypeCode());  
15.  jsonObjects.put(i++, jsonObject);  
16. }  
17.   
18. json.put("results", list.size());  
19. json.put("rows", jsonObjects);  
20.   
21. outJsonString(json.toString());  

 这里返回的json字符串如下:
 {"results":2,"rows":[{"desc":"选项一","code":"101"},{"desc":"选项二","code":"102"}]}

 

2、Ext.grid.GridPanel() 控件:(将json格式信息显示到GridPanel中)
说明:我这里说明的不是GridPanel而是里面的store,所以GridPanel里面的有些内蓉省掉了(如分页等,个人认为简单明了比较好)。
前台:

[javascript]   view plain copy

1. var grid = new Ext.grid.GridPanel({  
2.  autoWidth:true,  
3.  height:300,  
4.  cm:cm,         //列模型(这里就省了,注意:列模型形式一定要和返回的数据个数及名称一致)  
5.  loadMask:{msg:'正在加载中,请稍后..'},//加载时显示的等待信息  
6.  store:store  
7. });  
8.   
9. var store = new Ext.data.Store({  
10.  proxy:new Ext.data.HttpProxy({url:'TestAction!test.action'}),  
11.  reader:new Ext.data.JsonReader({  
12.    totalProperty:'results',  
13.    root:'jsonObjs'  
14.   },  
15.   [  
16.    {name:'id'},           
17.    {name:'name'},    
18.    {name:'sex'},   
19.    {name:'address'}  
20.      ]  
21.  ),  
22.  softInfo:{field:'id',direction:'DESC'}//排序  
23. });  

后台：

[java]   view plain copy

1. List<Users> list = testService.loadType(condition);//这里的方法说明同上  
2.   
3. JSONObject json = new JSONObject();  
4. JSONArray jsonObjects = new JSONArray();  
5.   
6. int i=0;  
7. Iterator<Users> it = list.iterator();  
8.   
9. while(it.hasNext()){  
10.  JSONObject jsonObject = new JSONObject();  
11.  Users user = it.next();//这里的Users对象就不多说了，同上  
12.   
13.  jsonObject.put("id",user.getId());  
14.  jsonObject.put("name", user.getName());  
15.  jsonObject.put("address", user.getAddress());  
16.  jsonObject.put("sex", user.getSex());  
17.  jsonObjects.put(i++, jsonObject);  
18. }  
19.   
20. json.put("results", list.size());  
21. json.put("jsonObjs", jsonObjects);  
22.   
23. outJsonString(json.toString());  

 这里返回的json字符串如下:(这里只有一条数据)
 {"results":1,"jsonObjs":[{"id":"11101","name":"xiesj","address":"nj","sex":"man"}]}

 

3、Ext中作form表单提交时返回的json数据：(主要用于判断后台提交是否成功)
说明:下面是一个保存时的表单提交对返回json数据的处理解析，这个比较简单
前台:

[javascript]   view plain copy

1. myFormPanel.form.submit({ //FormPanel的定义及设置就省了,简单明了最好！  
2.  waitTitle:'请稍后',  
3.  waitMsg:'正在保存数据,请稍后。。。',  
4.  url:'TestAction!saveData.action',  
5.  method:'POST',  
6.  success:function(form,action){  
7.   if(action.result.info == 'success'){//这就是对json数据的解析  
8.    Ext.Msg.alert("提示框","保存成功!");  
9.    return;  
10.   }else{  
11.    Ext.Msg.alert("提示框","保存失败!");  
12.    return;  
13.   }  
14.  },  
15.  failure:function(form,action){  
16.   Ext.Msg.alert("提示框","数据匹配错误，请重新填写!");  
17.   return;  
18.  }  
19. });  

后台：

[java]   view plain copy

1. String rslt_o = testService.save(condtions);//返回的值其实就两个:success和failure  
2.   
3. //String flag = "{success:true,info:'" + info.toString() + "'}";  
4. //outJsonString(flag);  
5. outJsonString("{success:true,info:'" + info.toString() + "'}"); //拼装返回(以上注释中的形式也可)  

 
 
 这里返回的json字符串如下:
 {success:true,info:'success'} 或 {success:true,info:'false'}

 

4、Ajax请求提交时返回的json数据:(接收返回信息)
说明:这里对返回过来的json数据，用eval函数做了处理
前台:

[javascript]   view plain copy

1. var resultObject = null;  
2. Ext.Ajax.request({  
3.  url:'testAction!test.action',  
4.  method:'POST',  
5.  success:function(result,request){  
6.   resultObject = eval('('+result.responseText+')');  
7.   Ext.Msg.alert('提示框',resultObject.message);  
8.   return;  
9.  },  
10.  failure:function(){  
11.   Ext.Msg.alert('提示框','操作失败!');  
12.   return;  
13.  }  
14. });  

后台：

[java]   view plain copy

1. String message = testService.test(map);  
2.   
3. JSONObject jsonObj_info = new JSONObject();  
4. jsonObj_info.put("message", message);  
5.   
6. outJsonString(jsonObj_info.toString());  

 这里返回的json字符串如下:
 {"message":"指定月份没有对应抄表数据!"}或{"message":"指定待计算月份不准确!"}或{"message":"计算完成!"}