一个jQuery 和json 页面交互的实例

工作中的点滴记录...

No.1 Jsp页面中的脚本代码  需要引入

<script type="text/javascript" src="${ctx}/js/jquery.js"></script>

 1<!--页面jquery脚本-->
 2
 3 function updateQuantity(){
 4   $.getJSON("${ctx}/do/material/updateQuantity?id="+$('#id').val()+"&quantity="+$('#quantity').val()+"&timestamp="+new Date().getTime(),
 5       function(data) {
 6   //遍历JSON中的每个entry
 7    $.each(data,function(entryIndex,entry){
 8    var html='<tr>';
 9//也可以写成entry.id entry.state
10    html+='<td>'+entry['id']+'</td>';
11    html+='<td>资料状态     '+entry['state']+'</td>';
12    html+='<td>'+entry['serialNumber']+'</td>';
13    html+='</tr>';
14    $('#title').html(html);
15
16    });
17    });
18}

No.2 后台controller代码

 1    /** *//**
 2     * 将传入的对象转化为JSON数据格式
 3     */
 4    protected JSONObject toJSONObject(Object obj) throws SecurityException, JSONException, NoSuchMethodException, IllegalArgumentException, IllegalAccessException,
 5         InvocationTargetException {
 6        JSONObject jobj = new JSONObject();
 7        Field[] fields = obj.getClass().getDeclaredFields();
 8        for (Field field : fields) {
 9        // 读取obj内部的对象属性;
10            if (field.getName().equals("department")) {
11                Object m = obj.getClass().getMethod("get" + StringUtils.capitalize("department")).invoke(obj);
12             jobj.put("id", m.getClass().getMethod("get" + StringUtils.capitalize("id")).invoke(m));
13                jobj.put("name", m.getClass().getMethod("get" + StringUtils.capitalize("name")).invoke(m));
14                continue;
15            }
16        // 过滤掉set成员变量
17            if (field.getType().equals(Set.class)) {  
18                continue;
19            }
20            // 成员变量是Date
21            if (field.getType().equals(Date.class)) {
22                Object invoke = obj.getClass().getMethod("get" + StringUtils.capitalize(field.getName())).invoke(obj);
23                String format = DateFormat.getDateInstance(DateFormat.DEFAULT).format(invoke);
24            // System.out.println(field.getName() + "===>" + format);
25                jobj.put(field.getName(), format);
26                continue;
27            }
28            // 成员变量是Boolean
29            if (field.getType().equals(Boolean.class)) {
30                jobj.put(field.getName(), obj.getClass().getMethod("is" + StringUtils.capitalize(field.getName())).invoke(obj));
31                continue;
32            }
33                try {
34                 jobj.put(field.getName(), obj.getClass().getMethod("get" + StringUtils.capitalize(field.getName())).invoke(obj));
35                } catch (Exception e) {
36                    continue;
37                }
38        }
39        return jobj;
40    }

model转型为json数据时，用了反射对model中成员变量为集合(Set)、Boolean、Date进行特殊处理。
PS:Json格式如下（里面添加了个性化的属性 以便JQUERY能够顺利解析）
[{},
{ "name":"value", "name":"value", 
"children":[{  "name":"value",  "attributes":{  "url":"/do/postRequirement/postRequirementList"  }},{  "name":"value",  "attributes":{   "url":"/do/trainingPlan/trainingPlanList"  } }]
},
{},{},{},{},{}]
Json整体格式为[{},{},{}]  ,内部数据为此基本结构的复合。{}内部有集合结构，如：children,也是以[]来包含。内部结构名称是自定的(个人理解)。
详细格式：http://www.json.org/json-zh.html

posted on 2010-10-12 17:27 无尽海 阅读(569) 评论(1)  编辑  收藏 所属分类: jQuery