`
jusescn
  • 浏览: 125250 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类:
  • ajax
阅读更多

简单实现,不用对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*     
分享到:
评论
11 楼 java.fan 2008-06-26  
呵呵
搂住的翻页没有看完,
不过我也又点想法,提出来大家评论.

首先,自定义一个标签,这个标签获取当前页面的 url ,然后修改 url 中的 翻页参数.
提交该url 后,标签又自动生成 最新的 翻页 连接 { 1  2  3  3  4} 这样的 ui

这样一来,页面上 只管 加入 标签,就 ok 了 .都不用去配置,
翻页调用的 方法,在 url 中体现了..翻页的数据,可以在实现类中获得.
10 楼 rennuoting 2008-05-16  
谢谢你的回复,JSON的类终于可以找到了,还有一些自定义的类没有,主要是com.at21.pm.util.BeanUtils
9 楼 jusescn 2008-05-16  
https://sourceforge.net/project/showfiles.php?group_id=171425
8 楼 rennuoting 2008-05-15  
这些应该都是JSONObject对象的方法。page对象都是写set,get方法。
可是我在JSON官网下载的代码中,JSONObject和JSONArray都没有这两个方法的,不知你的JSON是哪里下载的。能否共享下源代码呢?
7 楼 jusescn 2008-05-15  
rennuoting 写道
还有就是jsonobj.put(entry.getKey(), entry.getValue());和jsarray.add(jsobj);  JSON没有这两个方法啊。

这些应该都是JSONObject对象的方法。page对象都是写set,get方法。
6 楼 rennuoting 2008-05-14  
还有就是jsonobj.put(entry.getKey(), entry.getValue());和jsarray.add(jsobj);  JSON没有这两个方法啊。
5 楼 rennuoting 2008-05-14  
看了你的代码,对实现的过程有了大致的了解,但是分页的时候page是怎么样的呢,有没有完整的代码共享一下啊
4 楼 xly_971223 2007-08-30  
jusescn 写道
XStream处理简单对象的还可以,对于多对多,lazy=true的时候,转换对象为json对象时得到的会包含  "@class":"org.hibernate.collection.PersistentSet","initialized":"false" 需要手工对list/set对象Hibernate.initialize.

要采用ajax就不要奢望 opensessioninview 等方法了 所有的数据在返回前都必须准备好
3 楼 jusescn 2007-08-30  
XStream处理简单对象的还可以,对于多对多,lazy=true的时候,转换对象为json对象时得到的会包含  "@class":"org.hibernate.collection.PersistentSet","initialized":"false" 需要手工对list/set对象Hibernate.initialize.
2 楼 jusescn 2007-08-30  
哈哈,多谢多谢,试试
1 楼 xly_971223 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操作

相关推荐

    SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白

    这个压缩包中的资源,"SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白",显然提供了一个使用这些技术实现Ajax级联操作的实例。下面将详细介绍这些技术及其在Ajax操作中的应用。 **SSH ...

    ssh2+ajax+jquery+json 登陆验证

    综上所述,SSH2+Ajax+jQuery+JSON的登陆验证实现了对用户名的有效性检查,并通过异步的方式提高了用户体验。这种技术组合在现代Web开发中非常常见,特别是在构建交互性强、响应迅速的应用程序时尤为适用。

    基于SSH2+Maven+EasyUI+MySQL技术实战开发易买网电子商务交易平台4

    基于SSH2+Maven+EasyUI+MySQL技术实战开发易买网电子商务交易平台4

    ssh整合+JSON+Jquery+Ajax

    SSH整合指的是Spring、Struts和Hibernate这三大框架的集成应用,它们是...这些文件共同构成了一个完整的SSH+JSON+Jquery+Ajax的示例应用,展示了如何在实际开发中有效地组合使用这些技术,以实现高效、互动的Web应用。

    SSH2+json+ajax+jquery完整的项目源码

    SSH2+JSON+Ajax+jQuery是一个常见的Web开发技术组合,常用于构建动态、交互性强的Web应用程序。这个项目源码提供了使用这些技术的实际应用案例,方便开发者学习和参考。以下是这些技术的详细介绍: **SSH2 (Spring ...

    java_cPP.zip_json+jsp_ssh ajax json_ssh json

    在描述中,SSH框架结合JSON+AJAX,意味着应用利用了AJAX的异步特性,通过JSON格式与服务器进行数据交互,提供更流畅的用户体验。 SSH框架与AJAX结合,使得前端可以通过AJAX请求向后端发送数据,后端处理后再以JSON...

    ssh2+ajax+jquery+json验证用户名是否存在

    在这个过程中,SSH2代表Secure Shell 2,通常用于服务器端的安全管理,如远程登录、文件传输等。而AJAX(Asynchronous JavaScript and XML)是网页开发中用于创建动态交互用户体验的技术,通过在后台与服务器交换...

    基于SSH2+Maven+EasyUI+MySQL技术实战开发易买网电子商务交易平台2

    基于SSH2+Maven+EasyUI+MySQL技术实战开发易买网电子商务交易平台2

    json+ssh+ajax

    在标题“json+ssh+ajax”中,我们可以推测这是一个结合了这三种技术的项目。可能的情况是,这个项目使用SSH连接到远程服务器,然后使用AJAX技术来实现在用户界面中的实时数据更新,而这些数据可能是通过JSON格式交换...

    基于SSH2+Maven+EasyUI+MySQL技术实战开发易买网电子商务交易平台

    1.1、课程的背景 ... 亮点四、整个课程虽项目不大,但整个项目基本上涉及到JEasyui与后台交互的方方面面,而且讲师框架全部按大的项目架构去搭建的,学员拿到该项目后稍加改造就可以用到自己的项目,实用性超强.

    用eclipse搭建SSH架构(struts + spring + hibernate)

    Eclipse 搭建 SSH 架构(Struts + Spring + Hibernate) Eclipse 是一个功能强大且功能丰富的集成开发环境(IDE), SSH 架构(Struts + Spring + Hibernate)是 Java Web 开发中常用的架构模式。下面将详细介绍...

    基于SSH架构的616.JSP+MYSQL学生档案管理系统Java+JavaScript+CSS设计源码

    本项目是一款基于SSH架构的学生档案管理系统,采用Java、JavaScript和CSS进行开发。系统源码包含299个文件,其中包括66个PNG图片、58个Java类、58个JSP页面、31个JAR包、24个XML配置文件、14个JSP页面、9个...

    SSH+ztree+ajax+json

    在SSH+ztree+ajax+json项目中,Ajax可能被用于异步地从服务器获取数据(例如JSON格式),然后动态地更新ZTree的节点,提供更流畅的用户体验。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于...

    基于SSH架构的培训机构教务系统源码+项目说明.zip

    基于SSH架构的培训机构教务系统源码+项目说明.zip基于SSH架构的培训机构教务系统源码+项目说明.zip基于SSH架构的培训机构教务系统源码+项目说明.zip基于SSH架构的培训机构教务系统源码+项目说明.zip基于SSH架构的...

    ssh2+ajax+jquery+json验证用户名是否存在[参考].pdf

    在SSH2(Apache Struts2)、Ajax、jQuery和JSON技术组合中,验证用户名是否存在的功能是一个典型的前后端交互示例。以下是这些技术如何协同工作的详细解释: **SSH2 (Struts2)**:SSH2是Struts2的简称,它是Apache的...

    SSH1,JQuery的ajax返回json二维数组处理过程

    在本文中,我们将探讨如何使用SSH1框架与jQuery的AJAX功能来处理JSON二维数组,特别是在实现菜单联动下拉框的场景中。SSH1(Spring、Struts、Hibernate)是Java开发中的一个流行MVC框架组合,而jQuery的AJAX功能则...

    ssh2+json+ajax显示用户列表

    一个结合了ssh2+json+ajax的小例子,显示用户列表 开发环境:Myeclipse8.5+Mysql 内涵sql文件,ssh2部分是Myeclipse自动生成的,如果用eclipse的话需要导入jar包,内带jdbc和json部分的jar包。

    SSH所有jar+jbpm+json+extjs

    标题中的"SSH所有jar+jbpm+json+extjs"提到了几个关键的软件开发组件,这些组件在Java Web开发中扮演着重要角色。SSH是一个常见的缩写,它代表Spring、Struts和Hibernate三个框架,它们是Java企业级应用开发的基石。...

    ajax+jQuery+ssh+oracle级联实例

    在IT行业中,构建高效、动态的Web应用是关键任务之一,而"ajax+jQuery+ssh+oracle级联实例"提供了一个具体的实现方案。这个实例涵盖了前端到后端的关键技术,包括异步数据交互(Ajax)、JavaScript库(jQuery)、...

Global site tag (gtag.js) - Google Analytics