论坛首页 → Java企业应用论坛 →

基于SSH架构上的ajax翻页（json+prototype+jstemplate）

浏览 13403 次
锁定老帖子 主题：基于SSH架构上的ajax翻页（json+prototype+jstemplate）
精华帖 (0) :: 良好帖 (0) :: 新手帖 (2) :: 隐藏帖 (0)
作者 正文
  • jusescn
  • 等级: 一星会员
  • 性别:
  • 文章: 67
  • 积分: 115
  • 来自: 北京
   发表时间：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.                         for( int 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*     
返回顶楼
         
  • xly_971223
  • 等级: 五星会员
  • 性别:
  • 文章: 1202
  • 积分: 640
  • 来自: 北京
   发表时间：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 请登录后投票
  • jusescn
  • 等级: 一星会员
  • 性别:
  • 文章: 67
  • 积分: 115
  • 来自: 北京
   发表时间：2007-08-30  
哈哈，多谢多谢，试试
返回顶楼
          回帖地址
0 请登录后投票
  • jusescn
  • 等级: 一星会员
  • 性别:
  • 文章: 67
  • 积分: 115
  • 来自: 北京
   发表时间：2007-08-30  
XStream处理简单对象的还可以，对于多对多,lazy=true的时候，转换对象为json对象时得到的会包含  "@class":"org.hibernate.collection.PersistentSet","initialized":"false" 需要手工对list/set对象Hibernate.initialize.
返回顶楼
          回帖地址
0 请登录后投票
  • xly_971223
  • 等级: 五星会员
  • 性别:
  • 文章: 1202
  • 积分: 640
  • 来自: 北京
   发表时间：2007-08-30  
jusescn 写道
XStream处理简单对象的还可以，对于多对多,lazy=true的时候，转换对象为json对象时得到的会包含  "@class":"org.hibernate.collection.PersistentSet","initialized":"false" 需要手工对list/set对象Hibernate.initialize.

要采用ajax就不要奢望 opensessioninview 等方法了 所有的数据在返回前都必须准备好
返回顶楼
          回帖地址
0 请登录后投票
  • rennuoting
  • 等级: 初级会员
  • 文章: 21
  • 积分: 30
  • 来自: ...
   发表时间：2008-05-14  
看了你的代码，对实现的过程有了大致的了解，但是分页的时候page是怎么样的呢，有没有完整的代码共享一下啊
返回顶楼
          回帖地址
0 请登录后投票
  • rennuoting
  • 等级: 初级会员
  • 文章: 21
  • 积分: 30
  • 来自: ...
   发表时间：2008-05-14  
还有就是jsonobj.put(entry.getKey(), entry.getValue());和jsarray.add(jsobj);  JSON没有这两个方法啊。
返回顶楼
          回帖地址
0 请登录后投票
  • jusescn
  • 等级: 一星会员
  • 性别:
  • 文章: 67
  • 积分: 115
  • 来自: 北京
   发表时间：2008-05-15  
rennuoting 写道
还有就是jsonobj.put(entry.getKey(), entry.getValue());和jsarray.add(jsobj);  JSON没有这两个方法啊。

这些应该都是JSONObject对象的方法。page对象都是写set,get方法。
返回顶楼
          回帖地址
0 请登录后投票
  • rennuoting
  • 等级: 初级会员
  • 文章: 21
  • 积分: 30
  • 来自: ...
   发表时间：2008-05-15  
这些应该都是JSONObject对象的方法。page对象都是写set,get方法。
可是我在JSON官网下载的代码中，JSONObject和JSONArray都没有这两个方法的，不知你的JSON是哪里下载的。能否共享下源代码呢？
返回顶楼
          回帖地址
0 请登录后投票
  • jusescn
  • 等级: 一星会员
  • 性别:
  • 文章: 67
  • 积分: 115
  • 来自: 北京
   发表时间：2008-05-16  
https://sourceforge.net/project/showfiles.php?group_id=171425
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Java企业应用版

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