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

无尽海 — Tue, 12 Oct 2010 09:27:00 GMT

工作中的点滴记录...
No.1
jsp页面中的脚本代码需要引入

1
2
3function updateQuantity(){
4   $.getJSON("${ctx}/do/material/updateQuantity?id="+$('#id').val()+"&quantity="+$('#quantity').val()+"×tamp="+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格式
[{},
{ "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

无尽海 2010-10-12 17:27 发表评论

BlogJava-一往无前 终不怨 勿痴勿恋-随笔分类-jQuery

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

BlogJava-一往无前终不怨勿痴勿恋-随笔分类-jQuery