what is the RIA? just it…||咖啡兔项目

实例解析java + jQuery + json工作过程(获取JSON数据)

咖啡兔 — Sat, 28 Feb 2009 10:39:27 +0000

前天刚刚写的一篇关于《实例解析java + ajax(jQuery) + json工作过程(登录)》的文章引起了网友们的关注和好评，

自从本站的账务管理系统(个人版)开源以后很多网友询问系统的实现方式，我一一解释……，为此今天写文章详细讲解系统功能的实现细节。

以本站的开源项目账务管理系统的“债务人”模块为例子讲解

一、效果预览

债务人详细页面效果预览

二、实现方式

基本思想就是绑定列表中的人员名称触发事件，获得当前人员的ID发送ajax请求到后台，后台根据ID查询详细信息，返回JSON数据结果至前台，前台通过对话框组件显示人员详细

1、绑定click事件到列表的人员名称
在项目中的iouser/js/iouser.js文件中有这样一个方法：

/**
 * 点击名称弹出详细
 */
function regShowDetail() {
	$("span[name=iouid]").unbind('click').bind('click', function(){
		showDetail($(this).parent().parent().find('input[name=chk]').val());
	});
}

通过regShowDetail绑定了点击人员时执行showDetail的事件，

$(this).parent().parent().find('input[name=chk]').val()
//上面这句话就是获得列表左侧的复选框的value值以便传送给后台

下面介绍一下showDetail方法的功能实现：

 * 查看用户详细资料
 * @param {} userId 用户ID
 */
function showDetail(userId) {
	// 创建一个对话框组件
	var dialog = $.weeboxs.open('showDetail.html', {
		title: '正在加载用户信息……',
		contentType: 'ajax',
		width: 600,
		height: 350,
		animate: true,
		clickClose: false,
		type: 'wee',
		showOk: false,
		cancelBtnName: '关 闭',
		onopen: innerShowDetail
	});
 
	//内部函数，实现债务人详细信息的载入、设置值
	function innerShowDetail() {
		// 获得JSON格式的数据
		$.getJSON('load.do',{id : userId}, function(json) {
			// 根据key设置value
			for (key in json) {
				if(key == 'id'){
					$('#detailDiv #' + key).val(json[key]);
				} else {
					if(json[key] == ''){
						// 没有值设置为空
						$('#detailDiv #' + key).html('?');
					} else if(key == 'sex'){
						$('#detailDiv #' + key).html(json[key] == '0' ? '女' : '男');
					} else if(key == 'group'){
						if(json[key] != null) {
							$('#detailDiv #' + key).html(json[key]['groupName']);
						}
					} else {
						$('#detailDiv #' + key).html(json[key]);
					}
				}
			}
 
			//设置对话框标题和内容
			$('#detailDiv').removeAttr('class');
			dialog.setTitle('查看人员[' + json['userName'] + ']详细资料');
			dialog.setContent($('#detailDiv').html());
		});
	}
}

showDetail方法首先打开一个对话框组件加载一个静态的模板showDetail.html
- 文件中的ID都是根据信息点命名的，这样便于通过ID设置值
通过路径load.do 请求后台查询人员详细，后台处理类为net.yanhl.iouser.action.IOUserAction的loadUser()方法，代码请点击这里查看
- 怎么查询一个POJO对象就介绍了，重点说明怎么返回JSON格式的数据
- 这里还是使用java语言使用的JSON工具json-lib，关于json-lib的资料上篇文章也已介绍，这里不再重复；
```
// 获取一个Iouser对象，包含债务人的信息
Iouser user = (Iouser) getBaseManager().get(Iouser.class, iouserId);
 
//使用json-lib工具把一个POJO对象解析为一个JSON格式数据
JSONObject jsonObject = JSONObject.fromObject(user, config);
 
//向前台发送结果集
print(response, jsonObject.toString());
```
  最中返回的结果集如下：
  
  {
  “age” : 56,
  “companyAddress” : “32″,
  “companyName” : “未知”,
  “companyPhone” : “–”,
  “companyZip” : “”,
  “createDate” : null,
  “creatorId” : 1,
  “group” : {
  “childSize” : 0,
  “createDate” : {
  “date” : 27,
  “day” : 6,
  “hours” : 0,
  “minutes” : 0,
  “month” : 11,
  “nanos” : 0,
  “seconds” : 0,
  “time” : 1230307200000,
  “timezoneOffset” : -480,
  “year” : 108
  },
  “creatorId” : 1,
  “groupName” : “商务”,
  “id” : 33,
  “orderNum” : 0,
  “remark” : “”
  },
  “homeAddress” : “香港九龙”,
  “homePhone” : “”,
  “homeZip” : “”,
  “id” : 12,
  “mobilePhone” : “15856453456″,
  “orderNum” : 0,
  “remark” : “香港富豪”,
  “sex” : “1″,
  “userName” : “李嘉诚”
  }
前台获得了结果集之后就可以根据key获得value来设置详细页面的内容了，代码如下：
```
for (key in json) {
	if(key == 'id'){
		$('#detailDiv #' + key).val(json[key]);
	} else {
		$('#detailDiv #' + key).val(json[key]);
	}
}
```
至此就是我们刚刚看到的效果了，是不是很简单O(∩_∩)O~

附：

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/369 | 实例解析java + jQuery + json工作过程(获取JSON数据)

基于Java、jQuery应用的账务管理系统开源了(09.3.19更新)

咖啡兔 — Sat, 14 Feb 2009 09:35:00 +0000

基于Java、jQuery开发的账务管理系统(个人版)系统演示及源码共享，致力于企业级RIA应用……

在这个特殊的日子还是继续宅男的生活，过着没有情人的情人节，但是今年这个没有情人的情人节要献给广大Java、jQuery技术爱好者一份大礼，半年来周末、下班时间学习使用的账务管理系统公开源代码了，关于系统的说明请参看本博客相关文章，废话不说了，googlecode地址公布如下：

2009.02.25更新……

版本库主页：http://code.google.com/p/finance-p/
匿名检出版本库：svn checkout http://finance-p.googlecode.com/svn/trunk/ finance
googlecode上去下载

预览系统演示视频

关于系统功能的内部实现会陆续发布文章供大家研究、学习

如果你想参与到此项目的继续开发请联系博主

代码、功能仅供学习、参考，肯定存在一定问题，希望一块学习

更新2009.2.26

最近有一个网友下载了基于Java、jQuery开发的账务管理系统，上次的文档写的不完整，在这里向各位表示歉意，下面写一个完整的安装文档：

一、一个仅供学习之用的账务管理系统(个人版)

系统简介： 1、实现了用户、组管理 2、实现了物品类别、详细管理 3、实现了基本账务(货币)管理

开发此系统的初衷在于学习技术以便更好的应用在公司的项目中，本系统特别注重用户体验方面的设计，友好的界面和傻瓜式的操作

前后台架构： 1、java语言(jdk1.5)、struts1.2.9、hibernate3.2.6.ga、spring2.0.8 2、前台：主要使用了轻量级的ajax开发框架jQuery，使用jQuery很轻松的降低了服务器压力提高了用户体验并且代码容易维护，尤其是jQuery的插件机制更是简易了代码 3、数据库版本为mysql5.0 4、编码：为防止ajax乱码，所以项目、数据库全部使用UTF-8编码

浏览器兼容性：目前的设计兼容IE7+、FireFox、Chrome(有一点路径问题) 因为IE6下的CSS文件还为完成所以使用IE6访问系统会出现布局不美观情况

二、系统配置说明

1、数据库

mysql，本人使用版本是5.0.18

建立数据库名称为：finance，字符集设置为UTF-8，然后导入bak/finance.sql文件

mysql数据库属性

2、编译项目

说明：本项目没有使用标准的WebRoot格式，源代码文件夹SRC位于/WEB-INF/SRC目录下

SVN版本库和压缩包中没有class文件，即/WEB-INF目录下没有classes目录，需要自己使用eclipse编译，所有用到的jar包都在WEB-INF/lib目录下，即eclipse中build path–>libraries设置，各个框架的版本上面都已说明

编译时如果使用MyEclipse的话使用J2EE1.4这个library

使用tomcat或者weblogic等服务器jar包的请自行引入

eclipse编译环境

配置完成的eclipse目录

3、设置、启动服务

打开finance/WEB-INF/config/applicationContext.xml：

修改第10、11行的数据库名和密码为你的mysql数据库用户名、密码

部署tomcat应用：

在tomcat目录confCatalinalocalhost下建立一个finance.xml

内容：
docBase根据自己的情况设置

做完上面两步后就可以启动服务了，如果应用名设置为finance就直接可以访问了，如果自己另外定了应用名称则需要修改common/js/plugin/weebox.js中第17行，改为：url: ‘/应用名称/common/js/plugin/bgiframe.js’即可

访问系统最好使用Firefox浏览器，因为FF内置的JS引擎机制速度比IE快的多，或者google的Chrome浏览器也不错，其内置的JS8引擎比FF的性能还要好

账务管理系统(个人版)演示

4、更新最新版本

http://finance-p.googlecode.com/svn/trunk/

声明：本系统仅供学习使用，禁止商业应用版权归http://www.wsria.cn所有

如果有问题请联系作者：

QQ：576525789
MSN：yanhonglei@gmail.com

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/136 | 基于Java、jQuery应用的账务管理系统开源了(09.3.19更新)

基于Java、jQuery开发的账务管理系统(个人版)即将开源

咖啡兔 — Fri, 13 Feb 2009 07:15:01 +0000

最近公司的事情太多没有时间整理源代码，公司总是把员工当做年轻的黄牛使用，什么事情都交给你做……

情人节别人双双亲亲热热的咱着个宅男还是在家里codeing，正好趁这个时间把代码整理发布给大家，帮助那些想在java环境中使用jQuery的同学快速入门并应用的实际项目中去

前段时间在googlecode上申请了一个空间专门存放系统版本库，地址暂时先不公布，下周发布时发布消息。

需要此系统的同学可以先留下gmail账号

系统预览

谢谢关注，敬请期待……

声明:该日志由咖啡兔发表,你可以自由发表评论或转载到你的网站或博客。
转载请注明转自 what is the RIA? just it…||咖啡兔 ™
原始链接:http://www.wsria.cn/archives/89 | 基于Java、jQuery开发的账务管理系统(个人版)即将开源