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

最新推荐文章于 2019-02-02 13:53:25 发布

weixin_33896069

最新推荐文章于 2019-02-02 13:53:25 发布

阅读量90

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/vanilla-sky/archive/2010/10/31/1865610.html

版权

工作中的点滴记录...

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

1
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

转载于:https://www.cnblogs.com/vanilla-sky/archive/2010/10/31/1865610.html