论坛首页 Java企业应用论坛

基于SSH架构上的ajax翻页(json+prototype+jstemplate)

浏览 13405 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (2) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-08-29  

简单实现,不用对TMD的一堆的js的api了解,俺还不是js专员,写的太烂,还是java比较贴心啊。

实现流程:页面new Ajax.Request()==》action中获得page对象==》转换为json对象,保存到response中==》在页面中处理返回对象var data  = res.responseText.evalJSON();(prototype1.5.1支持)==》调用jstemplate模板引擎对页面进行重组$("output").innerHTML = TrimPath.processDOMTemplate("template_jst", data) ,翻页完成了。

具体代码:

页面请求:

js 代码
  1. function ajaxpage(pno){   
  2.     var url = "${ctx}/admin/usergroup.do?actionMethod=pageAjaxUser";   
  3.     var pars = "pageno="+pno;   
  4.     var myAjax = new Ajax.Request(url, {method: 'get', parameters: pars, onComplete: showResult});   
  5. }   
  6. function showResult(res){   
  7.     var data  = res.responseText.evalJSON();   
  8.      $("output").innerHTML = TrimPath.processDOMTemplate("template_jst", data);   
  9. }  

 

action:

java 代码
  1. public ActionForward pageAjaxUser(ActionMapping mapping, ActionForm form,   
  2.             HttpServletRequest request, HttpServletResponse response)   
  3.     throws Exception {   
  4.         try {   
  5.             String pno = request.getParameter("pageno");   
  6.             int pageNo = 1;   
  7.             if ( pno != null || !"".equals(pno)){   
  8.                 pageNo = Integer.parseInt(pno);   
  9.             }   
  10.             Page page = userManager.query(pageNo, 10);   
  11.             Object o = page.getResult();   
  12.             if ( o != null ){   
  13.                 List l = (List)o;   
  14.                 JSONObject json = new JSONObject();   
  15.                 json.put("users", ToJSONArray(l));   
  16.                 json.put("page", ToJSONObject(page));   
  17.                 saveJSON(response, json);   
  18.             }   
  19.         } catch (Exception e) {   
  20.             logger.error("pageAjaxUser", e);   
  21.         }   
  22.         return null;   
  23.     }  

 

其中对持久化对象装化为jsonobject对象,对list转化为jsonarray对象,保存到response中。

持久化对象转化为jsonObject(类似dwr中对dwr.xml定义),对对象中的set/list只进行第一层转化,再转化容易出现死循环(比如user对象含有roles,roles为role对象聚集,对roles循环处理时,role对象含有users聚集....无限死循环)

java 代码
  1. /**  
  2.      * 将实体对象转化为json对象(类似dwr中dwr.xml定义文件),对对象中的set,list,map不做处理,容易产生死循环  
  3.      */  
  4.     protected JSONObject ToJSONObject(Object obj) throws NoSuchFieldException{   
  5.         Field[] fields = obj.getClass().getDeclaredFields();   
  6.         JSONObject json = new JSONObject();   
  7.         for ( int i = 0 ; i < fields.length ; i++){   
  8.             Field field = fields[i];   
  9.             Object objValue = com.at21.pm.util.BeanUtils.forceGetProperty(obj, field.getName());   
  10.             if ( objValue instanceof Collection ){   
  11.                 if ( objValue != null && !((Collection)objValue).isEmpty()){   
  12.                     Collection col = (Collection)objValue;   
  13.                     JSONArray jsarray = new JSONArray();   
  14.                     for (Iterator iter = col.iterator(); iter.hasNext();) {   
  15.                         Object element = iter.next();   
  16.                         Field[] efields = element.getClass().getDeclaredFields();   
  17.                         JSONObject jsonobj = new JSONObject();   
  18.                         forint j=0;j<efields.length;j++){   
  19.                             Field efield = efields[j];   
  20.                             Object evalue = com.at21.pm.util.BeanUtils.forceGetProperty(element, efield.getName());   
  21.                             if ( !(evalue instanceof Collection || evalue instanceof Map    
  22.                                     || evalue instanceof Object[] || evalue instanceof Clob    
  23.                                     || evalue instanceof Blob )){   
  24. //                              logger.debug("=====>"+field.getName() + " <> " + efield.getName()+"  <>  "+ evalue);   
  25.                                 if ( evalue instanceof Date ){   
  26.                                     if ( evalue == null ){   
  27.                                         evalue = "";   
  28.                                     }else{   
  29.                                         SimpleDateFormat formate = new SimpleDateFormat("yyyy-MM-dd");   
  30.                                         evalue = formate.format(evalue);   
  31.                                     }   
  32.                                 }   
  33.                                 jsonobj.put(efield.getName(), evalue);   
  34.                             }   
  35.                         }   
  36.                         jsarray.add(jsonobj);   
  37.                     }   
  38.                     json.put(field.getName(), jsarray);   
  39.                 }   
  40.             }else if (!(objValue instanceof Collection || objValue instanceof Map || objValue instanceof Object[]   
  41.                     || objValue instanceof Clob || objValue instanceof Blob)) {   
  42.                 //logger.debug("=====>"+field.getName()+"  <>  "+ objValue);   
  43.                 if ( objValue instanceof Date ){   
  44.                     if ( objValue == null ){   
  45.                         objValue = "";   
  46.                     }else{   
  47.                         SimpleDateFormat formate = new SimpleDateFormat("yyyy-MM-dd");   
  48.                         objValue = formate.format(objValue);   
  49.                     }   
  50.                 }   
  51.                 json.put(field.getName(), objValue);   
  52.             }   
  53.         }   
  54.         return json;   
  55.     }  

 

将list转化为jsonarray

java 代码
  1. /**  
  2.  * 将Collection转换为json对象  
  3.  */  
  4. protected JSONArray ToJSONArray(Collection c) throws NoSuchFieldException{   
  5.     JSONArray jsarray = new JSONArray();   
  6.     for (Iterator iter = c.iterator(); iter.hasNext();) {   
  7.         Object object =  iter.next();   
  8.         if (object instanceof Map) {   
  9.             Map map = (Map) object;   
  10.             JSONObject jsonobj = new JSONObject();   
  11.             for (Iterator iterator = map.entrySet().iterator(); iterator.hasNext();) {   
  12.                 Map.Entry entry = (Map.Entry) iterator.next();   
  13.                 jsonobj.put(entry.getKey(), entry.getValue());   
  14.             }   
  15.             jsarray.add(jsonobj);   
  16.         }else{   
  17.             JSONObject jsobj = ToJSONObject(object);   
  18.             jsarray.add(jsobj);   
  19.         }   
  20.     }   
  21.     return jsarray;   
  22. }  

 

最后是保存json对象

java 代码
  1. /**  
  2.      * 保存JSON到respose中  
  3.      */  
  4.     protected void saveJSON(HttpServletResponse response,JSONObject object){   
  5.         logger.debug("JSONObject:"+object);   
  6.         response.setContentType("text/html");   
  7.         response.setCharacterEncoding("utf-8");   
  8.         try {   
  9.             PrintWriter pw = response.getWriter();   
  10.             pw.print(object);   
  11.             pw.flush();   
  12.         } catch (Exception e) {   
  13.             e.printStackTrace();   
  14.         }   
  15.     }  

页面处理返回对象

js 代码
  1. var data  = res.responseText.evalJSON();   
  2.      $("output").innerHTML = TrimPath.processDOMTemplate("template_jst", data);   

jstemplate脚本模版(需要对jstemplate.js修改下,将标示符号$替换成#,否则与好多东西冲突的不成了,比如说jstl),我将尖括号变成*了

html 代码
  1. *textarea name="template_jst" id="template_jst" style="display:none;"*   
  2. *table width="90%"  border="0" align="center" cellpadding="5" cellspacing="0" class="table6"*   
  3.   *tr class="td1" *   
  4.    *td**fmt:message key="list.number" /**/td*   
  5.     *td**fmt:message key="userReg.usernameCN" /**/td*   
  6.     *td*E-mail*/td*   
  7.     *td**fmt:message key="userReg.usernameCN" /**/td*   
  8.   */tr*   
  9.  {var varName = 1}   
  10.  {for user in users}   
  11.      *tr {if varName%2 == 0} {cdata} class="td1" {/cdata}{/if}*   
  12.       *td**input type="checkbox" value="#{user.id}" id="ids" onclick="addUser(this,'#{user.id}','#{user.usernameCN}')"* #{varName++ }*/td*   
  13.       *td*#{user.usernameCN}*/td*   
  14.       *td*#{user.email}*/td*   
  15.       *td*#{user.createdate}*/td*   
  16.      */tr*   
  17.  {forelse}   
  18.      *tr  **td colspan="4"*No find*/td**/tr*   
  19.  {/for}   
  20.   *tr align="center" *   
  21.    *td colspan="4"*共#{page.totalCount}条 &nbsp;第#{page.currentPageNo}/#{page.totalPageCount}页    
  22.    {if page.hasPreviousPage}*input type="button" value="上一页" onclick="ajaxpage(#{page.currentPageNo-1})"*{/if}    
  23.    {if page.hasNextPage}*input type="button" value="下一页" onclick="ajaxpage(#{page.currentPageNo+1})"*{/if}*/td*   
  24.   */tr*   
  25. */table*   
  26. */textarea*     
   发表时间:2007-08-30  
将page对象转换成json可以用xstream
page = productManager.findProduct(getPageno());
XStream xstream = new XStream(new JettisonMappedXmlDriver());
xstream.alias("product", Product.class);
xstream.alias("page", Page.class);
log.info(xstream.toXML(page));


jstemplate好像是个好东东 可以省去好的js dhtml操作
0 请登录后投票
   发表时间:2007-08-30  
哈哈,多谢多谢,试试
0 请登录后投票
   发表时间:2007-08-30  
XStream处理简单对象的还可以,对于多对多,lazy=true的时候,转换对象为json对象时得到的会包含  "@class":"org.hibernate.collection.PersistentSet","initialized":"false" 需要手工对list/set对象Hibernate.initialize.
0 请登录后投票
   发表时间:2007-08-30  
jusescn 写道
XStream处理简单对象的还可以,对于多对多,lazy=true的时候,转换对象为json对象时得到的会包含  "@class":"org.hibernate.collection.PersistentSet","initialized":"false" 需要手工对list/set对象Hibernate.initialize.

要采用ajax就不要奢望 opensessioninview 等方法了 所有的数据在返回前都必须准备好
0 请登录后投票
   发表时间:2008-05-14  
看了你的代码,对实现的过程有了大致的了解,但是分页的时候page是怎么样的呢,有没有完整的代码共享一下啊
0 请登录后投票
   发表时间:2008-05-14  
还有就是jsonobj.put(entry.getKey(), entry.getValue());和jsarray.add(jsobj);  JSON没有这两个方法啊。
0 请登录后投票
   发表时间:2008-05-15  
rennuoting 写道
还有就是jsonobj.put(entry.getKey(), entry.getValue());和jsarray.add(jsobj);  JSON没有这两个方法啊。

这些应该都是JSONObject对象的方法。page对象都是写set,get方法。
0 请登录后投票
   发表时间:2008-05-15  
这些应该都是JSONObject对象的方法。page对象都是写set,get方法。
可是我在JSON官网下载的代码中,JSONObject和JSONArray都没有这两个方法的,不知你的JSON是哪里下载的。能否共享下源代码呢?
0 请登录后投票
   发表时间:2008-05-16  
https://sourceforge.net/project/showfiles.php?group_id=171425
0 请登录后投票
论坛首页 Java企业应用版

跳转论坛:
Global site tag (gtag.js) - Google Analytics