一個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 無盡海 閱讀(586) 評論(1)  編輯  收藏 所屬分類: jQuery