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

jusescn

浏览: 124810 次
性别:
来自: 北京

最近访客更多访客>>

tianfeng701

afu

sakurakann

windelk

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

json Ajax prototype SSH DWR

简单实现，不用对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 代码

function ajaxpage(pno){
var url = "${ctx}/admin/usergroup.do?actionMethod=pageAjaxUser";
var pars = "pageno="+pno;
var myAjax = new Ajax.Request(url, {method: 'get', parameters: pars, onComplete: showResult});
}
function showResult(res){
var data = res.responseText.evalJSON();
$("output").innerHTML = TrimPath.processDOMTemplate("template_jst", data);
}

action：

java 代码

public ActionForward pageAjaxUser(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
try {
String pno = request.getParameter("pageno");
int pageNo = 1;
if ( pno != null || !"".equals(pno)){
pageNo = Integer.parseInt(pno);
}
Page page = userManager.query(pageNo, 10);
Object o = page.getResult();
if ( o != null ){
List l = (List)o;
JSONObject json = new JSONObject();
json.put("users", ToJSONArray(l));
json.put("page", ToJSONObject(page));
saveJSON(response, json);
}
} catch (Exception e) {
logger.error("pageAjaxUser", e);
}
return null;
}

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

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

java 代码

/**
* 将实体对象转化为json对象(类似dwr中dwr.xml定义文件),对对象中的set,list,map不做处理,容易产生死循环
*/
protected JSONObject ToJSONObject(Object obj) throws NoSuchFieldException{
Field[] fields = obj.getClass().getDeclaredFields();
JSONObject json = new JSONObject();
for ( int i = 0 ; i < fields.length ; i++){
Field field = fields[i];
Object objValue = com.at21.pm.util.BeanUtils.forceGetProperty(obj, field.getName());
if ( objValue instanceof Collection ){
if ( objValue != null && !((Collection)objValue).isEmpty()){
Collection col = (Collection)objValue;
JSONArray jsarray = new JSONArray();
for (Iterator iter = col.iterator(); iter.hasNext();) {
Object element = iter.next();
Field[] efields = element.getClass().getDeclaredFields();
JSONObject jsonobj = new JSONObject();
for( int j=0;j<efields.length;j++){
Field efield = efields[j];
Object evalue = com.at21.pm.util.BeanUtils.forceGetProperty(element, efield.getName());
if ( !(evalue instanceof Collection || evalue instanceof Map
|| evalue instanceof Object[] || evalue instanceof Clob
|| evalue instanceof Blob )){
// logger.debug("=====>"+field.getName() + " <> " + efield.getName()+" <> "+ evalue);
if ( evalue instanceof Date ){
if ( evalue == null ){
evalue = "";
}else{
SimpleDateFormat formate = new SimpleDateFormat("yyyy-MM-dd");
evalue = formate.format(evalue);
}
}
jsonobj.put(efield.getName(), evalue);
}
}
jsarray.add(jsonobj);
}
json.put(field.getName(), jsarray);
}
}else if (!(objValue instanceof Collection || objValue instanceof Map || objValue instanceof Object[]
|| objValue instanceof Clob || objValue instanceof Blob)) {
//logger.debug("=====>"+field.getName()+" <> "+ objValue);
if ( objValue instanceof Date ){
if ( objValue == null ){
objValue = "";
}else{
SimpleDateFormat formate = new SimpleDateFormat("yyyy-MM-dd");
objValue = formate.format(objValue);
}
}
json.put(field.getName(), objValue);
}
}
return json;
}

将list转化为jsonarray

java 代码

/**
* 将Collection转换为json对象
*/
protected JSONArray ToJSONArray(Collection c) throws NoSuchFieldException{
JSONArray jsarray = new JSONArray();
for (Iterator iter = c.iterator(); iter.hasNext();) {
Object object = iter.next();
if (object instanceof Map) {
Map map = (Map) object;
JSONObject jsonobj = new JSONObject();
for (Iterator iterator = map.entrySet().iterator(); iterator.hasNext();) {
Map.Entry entry = (Map.Entry) iterator.next();
jsonobj.put(entry.getKey(), entry.getValue());
}
jsarray.add(jsonobj);
}else{
JSONObject jsobj = ToJSONObject(object);
jsarray.add(jsobj);
}
}
return jsarray;
}

最后是保存json对象

java 代码

/**
* 保存JSON到respose中
*/
protected void saveJSON(HttpServletResponse response,JSONObject object){
logger.debug("JSONObject:"+object);
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
try {
PrintWriter pw = response.getWriter();
pw.print(object);
pw.flush();
} catch (Exception e) {
e.printStackTrace();
}
}

页面处理返回对象

js 代码

var data = res.responseText.evalJSON();
$("output").innerHTML = TrimPath.processDOMTemplate("template_jst", data);

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

html 代码

*textarea name="template_jst" id="template_jst" style="display:none;"*
*table width="90%" border="0" align="center" cellpadding="5" cellspacing="0" class="table6"*
*tr class="td1" *
*td**fmt:message key="list.number" /**/td*
*td**fmt:message key="userReg.usernameCN" /**/td*
*td*E-mail*/td*
*td**fmt:message key="userReg.usernameCN" /**/td*
*/tr*
{var varName = 1}
{for user in users}
*tr {if varName%2 == 0} {cdata} class="td1" {/cdata}{/if}*
*td**input type="checkbox" value="#{user.id}" id="ids" onclick="addUser(this,'#{user.id}','#{user.usernameCN}')"* #{varName++ }*/td*
*td*#{user.usernameCN}*/td*
*td*#{user.email}*/td*
*td*#{user.createdate}*/td*
*/tr*
{forelse}
*tr **td colspan="4"*No find*/td**/tr*
{/for}
*tr align="center" *
*td colspan="4"*共#{page.totalCount}条  第#{page.currentPageNo}/#{page.totalPageCount}页
{if page.hasPreviousPage}*input type="button" value="上一页" onclick="ajaxpage(#{page.currentPageNo-1})"*{/if}
{if page.hasNextPage}*input type="button" value="下一页" onclick="ajaxpage(#{page.currentPageNo+1})"*{/if}*/td*
*/tr*
*/table*
*/textarea*

分享到：

[ext2.0d5]刚从ext.js上下载的ext2.0d5，呵 ... | Pragmatic Struts

2007-08-29 10:03
浏览 3489
评论(11)
论坛回复 / 浏览 (11 / 13401)
分类:企业架构
查看更多

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

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操作

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论