`

dwr和json的结合

阅读更多
  在权限分配认证操作中使用了dwr为了方便操作.但是设置是每次点击checkBox就会改变角色的认证...后来老总说这个操作好像不大好进行了大幅度的修改.后来逼着使用json来传递参数..不过自己写的这个方法通用性不强..这里只是讲解下利用json作为参数传递数据的过程吧...
首先到http://sourceforge.net/projects/json-lib/files/
下载json在java后台转换的辅助包.
这包提供了 JSONObject json = JSONObject.fromObject(map);
将一些对象转换为JSONObject的对象.JSONObject调用toString()将会变成json格式的数据.下面有个测试类可以看看效果
package ajax.json.start;

import junit.framework.Assert;
import net.sf.json.JSONArray;

import org.junit.Test;

public class ArrayTestCase {

	private String string = "[true,false,true]";
	private boolean[] array = new boolean[] { true, false, true };

	@Test
	public void testToJson() {
		JSONArray json = JSONArray.fromObject(array);
		String s = json.toString();
		Assert.assertEquals(string, s);
	}
	
	@Test
	public void testToArray() {
		JSONArray json = JSONArray.fromObject(string);
		Object[] objs = (Object[]) JSONArray.toArray(json);
		for (int i = 0; i < array.length; i++) {
			Assert.assertEquals(((Boolean) objs[i]).booleanValue(), array[i]);
		}
	}
}



由于我的项目javascript内容比较多.我就截取一些代码进行说明
由于html也是使用dom解析的..所以我们可以在其上面进行一些属性添加和赋值再从javascript中获取到相应的值

1.配置dwr.
web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

  <servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
    <init-param>
      <param-name>debug</param-name>
      <param-value>true</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>
</web-app>

dwr.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">
<dwr>
  <allow>
<!--new: 用Java的new关键字创造对象。 -->
    <create creator="new" javascript="test">
  	<param name="class" value="com.json.Test"/><!--对应的类-->
	</create>
    <convert match="com.json.SubBean" converter="bean"><!--传输的对象.这里没有使用到.就做到解析-->
    	<param name="include" value="id,name"></param>
    </convert>
    
  </allow>
</dwr>

2.编写获取json数据进行解析的类
package com.json;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;



public class Test {
	public void saveOrUpdate(String jsonArray) {
		JSONArray json = JSONArray.fromObject(jsonArray);//获取到数组字符串进行转换数组对象
		Object[] objs = (Object[]) JSONArray.toArray(json);//转换为数组
		for (int i = 0; i < objs.length; i++) {
			JSONObject obj = JSONObject.fromObject(objs[i]);//存放的数据进行对象转换
			SubBean subBean = (SubBean) JSONObject.toBean(obj,SubBean.class);//转换为相应的对象进行参数的提取
			System.out.println("SubBean id:"+subBean.getId()+"name:"+subBean.getName());
		}
	}
}


3.页面的编写
<%@ page pageEncoding="gb2312" contentType="text/html; charset=gb2312"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>check</title>
    <script type="text/javascript" src="${pageContext.request.contextPath }/dwr/engine.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/dwr/util.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/dwr/interface/test.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/json2.js"></script>
    <script type="text/javascript">
    var temp = [];//临时存放json对象的数组.因为浏览器兼容问题最好使用[]
    function saveOrUpdate(field) {
    	var subBean = {id:"",name:""};//SubBean对应的json形式
    	subBean.id = parseInt(field.id);//因为SubBean的id是整型的.所以要先做转换才能正确的赋值.其他类型也一样操作
    	subBean.name = field.getAttribute("name");//对于自己添加到属性因为浏览器兼容问题要统一使用getAttribute()。
    	temp.push(subBean);
    }
   function  referData(){
    test.saveOrUpdate(JSON.stringify(temp));//将存放json对象的数组变成字符串形式进行添加到后台.
    }
    </script>
  </head>
  
  <body>
  <table>
  <tr>
  <td>
	<span id="C_Color"><input type="checkbox"  id="0" onclick="saveOrUpdate(this)" name="C"></span>C
	<span id="R_Color"><input type="checkbox" id="1" onclick="saveOrUpdate(this)" name="R"></span>R
	<span id="U_Color"><input type="checkbox" id="2" onclick="saveOrUpdate(this)" name="U"></span>U
	<span id="D_Color"><input type="checkbox" id="3" onclick="saveOrUpdate(this)" name="D"></span>D
	</td>
  </tr>
  <TR align="center">
			<TD colspan="3" bgcolor="#EFF3F7">
			<input type="button" class="MyButton"
				value="提交数据" onclick="referData()">
				<input type="button" class="MyButton"
				value="关闭窗口" onclick="closeWindow()">
			</TD>
		</TR>
  </table>
  </body>
</html>



总结:这里使用json使得一些数据传输可以更灵活的使用.不过也导致了前台js操作数据过多.对自己所遇到的实际情况进行选择...还有在火狐中checkbox的style设置颜色是没有效果的.所以在点击checkbox想设置颜色的话.就加个span上去或者修改字体颜色达到效果
分享到:
评论

相关推荐

    ssh+ext+json+dwr技术实现的动态树

    三大框架框架整合,结合最新extjs3.0技术,以及json作为数据交换器,dwr框架的无刷新实现,不可多得的动态树实现列子,千万不要错过哟!

    三个ajax实现 shh jquery json输入提示内容功能

    三个ajax实现简单实现 包括dwr struts2 和 struts2、jQuery、json结合。及一个shh jquery json输入提示内容功能例子。

    Ext Grid +dwr 列表展示展示带分页

    使用ext3.0 实现 GridPanel 分页显示,调用后台数据 ,格式为json,数据使用 xml 无数据库下载就可以运行,与dwr结合

    maven-framework-project:基于maven的多框架和多视图融合技术(Struts1,Struts2,Spring,SpringMVC,Hibernate,Ibatis,MyBatis,Spring Data JPA,DWR)

    Maven框架项目该项目不再更新维护,请移步该项目基于maven3.0构建的,项目中融合了Struts1 , Struts2 , Spring , SpringMVC , ...项目中的持久化框架sql语句的跟踪分别采用log4jdbc结合log4j和p6spy ,在控

    Ajax详解.rar

    第 14部分:面向 Java 开发人员的 Ajax 结合 Direct Web Remoting 使用 Ajax 154 1.1 DWR 是什么? 155 1.2 关于示例 155 1.3 实现目录 156 1.4 测试部署 157 1.5 调用远程对象 158 1.6 实现购物车 160 1.7 ...

    Ext 开发指南 学习资料

    8.7.5. SplitButton让按钮和菜单结合 8.8. 蓝与灰,切换主题 8.9. 悬停提示 8.9.1. 起初,初始化 8.9.2. 诞生,注册提示 8.9.3. 分支,标签提示 8.9.4. 发展,全局配置 8.9.5. 进化,个体配置 8.10. 灵异事件,Ext....

    EXT教程EXT用大量的实例演示Ext实例

    8.7.5. SplitButton让按钮和菜单结合 9. 沉寂吧!我们要自己的控件。 9.1. 下拉树形选择框TreeField 9.2. 带全选的checkbox树形CheckBoxTree 9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的...

    EXT2.0中文教程

    8.7.5. SplitButton让按钮和菜单结合 9. 沉寂吧!我们要自己的控件。 9.1. 下拉树形选择框TreeField 9.2. 带全选的checkbox树形CheckBoxTree 9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期...

    精通JS脚本之ExtJS框架.part2.rar

    10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 ...

    精通JS脚本之ExtJS框架.part1.rar

    10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 ...

    低清版 大型门户网站是这样炼成的.pdf

    2.6.2 定义和使用拦截器栈 97 2.6.3 使用自定义拦截器 98 2.7 小结 100 第3章 struts 2标签库详解与ajax技术应用 103 3.1 struts 2主题与模板 103 3.2 struts 2控制标签详解 105 3.2.1 if/elseif/else标签详解...

Global site tag (gtag.js) - Google Analytics