DWR入门 （二）用户实例

阅读更多

1. 创建model类
创建一个User类和一个Group类，
每一个user属于一个group。

2. 创建UserService类

public class UserService {
	//由于DWR会创建UserService对象，所以这里要用静态属性，让多个类实例共享这些属性。
	private static Map users=new HashMap();
	
	static {
		users.put(1, new User(1,"alleni",new Group(1,"english")));
		users.put(2, new User(2,"eline",new Group(1,"english")));
		users.put(3, new User(3,"doudou",new Group(2,"hunter")));
	}
	
	public UserService(){
		 System.out.println("UserService Constructor");
	}
	
	
	public User load(int id){
		return users.get(id);
	}
	
	
	public void add(User user){
		users.put(user.getId(), user);
	}
	
	
	public void delete(int id){
		users.remove(id);
	}
	
	public Listlist(){
		 List list=ArraysHelper.map2List(users);
		return list;
	}
}

3. 配置dwr.xml


 

4. 创建dwr02.jsp,加入js代码：

4.1 调用load方法，根据id获取用户

这里会调用UserService的load方法，会查询到id为1的用户信息以及其所在的用户组信息。



以上可以做成输入id查询方法：

输入id:
			
		

	function searchUser(id){
//	console.log(id);
//		alert(id);
		UserService.load(id,function(data){
			var tb = $("#users tbody");
			tb.empty();
			tb.append("" + data.id + ""
				 +"" + data.name + ""+
				  "" + data.group.name + "");
		});
	}

4.2 调用list方法，获取所有用户信息以及用户组信息

UserService.list(function(data){
	 			console.log(data);
	 			console.log(data.length); //3
});

	UserService.list(function(data) {
			console.log(data);
			console.log(data.length);

			var tb = $("#users");
			var tbody=tb.append("");
			
			
			for ( var i = 0; i < data.length; i++) {
				console.log(data[i].id+":"+data[i].name+":"+data[i].group.name);
				tbody.append("" + data[i].id + ""
				 +"" + data[i].name + ""+
				  "" + data[i].group.name + "");
			}
			tb.append("");
		});

4.3 添加用户

用户名:
	 用户id:
	
	
 组名称:
	 组id:
	
	

	


	function init() {

		 
		var addUserNode = $("#addUser");
		addUserNode.on("click", function() {
			addUser();
		});
       }

	function addUser() {
		var uid = $("#userId").val();
		var gid = $("#groupId").val();
		var uname = $("#userName").val();
		var gname = $("#groupName").val();
		var user = {
			"id" : uid,
			"name" : uname,
			group : {
				"id" : gid,
				"name" : gname
			}
		};

		UserService.add(user);
		init();
	}

最后上传整个界面代码

• 
• 大小: 11.6 KB

• 
• 大小: 10.7 KB

• 
• 大小: 25.1 KB

• dwr02.rar (1.4 KB)
• 下载次数: 3

• 查看图片附件