1. 创建model类
创建一个User类和一个Group类,
每一个user属于一个group。
2. 创建UserService类
public class UserService {
//由于DWR会创建UserService对象,所以这里要用静态属性,让多个类实例共享这些属性。
private static Map<Integer,User> users=new HashMap<Integer,User>();
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 List<User>list(){
List<User> list=ArraysHelper.map2List(users);
return list;
}
}
3. 配置dwr.xml
<create creator="new">
<param name="class" value="com.lj.dwr.UserService"/>
</create>
<convert match="dwr.User" converter="bean"/>
<convert match="dwr.Group" converter="bean"/>
4. 创建dwr02.jsp,加入js代码:
4.1 调用load方法,根据id获取用户
<script type="text/javascript">
window.onload=init;
function init(){
//var t=document.getElementById("users");
var t=$("#users");
UserService.load(1,function(data){
console.log(data);
console.log(data.id+": "+data.name+"->"+data.group.name);
});
};
</script>
这里会调用UserService的load方法,会查询到id为1的用户信息以及其所在的用户组信息。
以上可以做成输入id查询方法:
<tr><td colspan="3">输入id:<input type="text" id="searchId"/>
<input type="button" value="search" onclick="searchUser(searchId.value)"/>
</td></tr>
function searchUser(id){
// console.log(id);
// alert(id);
UserService.load(id,function(data){
var tb = $("#users tbody");
tb.empty();
tb.append("<tr><td>" + data.id + "</td>"
+"<td>" + data.name + "</td>"+
"<td>" + data.group.name + "</td></tr>");
});
}
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("<tbody>");
for ( var i = 0; i < data.length; i++) {
console.log(data[i].id+":"+data[i].name+":"+data[i].group.name);
tbody.append("<tr><td>" + data[i].id + "</td>"
+"<td>" + data[i].name + "</td>"+
"<td>" + data[i].group.name + "</td></tr>");
}
tb.append("</tbody>");
});
4.3 添加用户
用户名:
<input type="text" id="userName" /> 用户id:
<input type="text" id="userId" />
<br /> 组名称:
<input type="text" id="groupName" /> 组id:
<input type="text" id="groupId" />
<br />
<input type="button" id="addUser" value="添加用户" />
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
分享到:
相关推荐
DWR入门教程及实例(含源代码),DWR的入门教程,jar文件夹中提供DWR所用jar包,运行源代码时需导入此文件夹中所有jar包
本资料详细讲述了dwr的配置及简单常见的应用,方便快速上手!
dwr实例教程 很好的入门实例 学习完可以很好的使用动态验证登录 菜单动态刷新
dwr的入门实例,源代码,有助于ajax的学习
实例+说明 学完就会DWR dwr入门资料
dwr的入门实例,可以实现使用ajax前台调用后台的方法
dwr 入门实例,新手可以借鉴一下,很简单的~一看就明白
dwr实例 - 这是本人,开发的:小游戏 [大家一起来赚钱] 本例子可做为dwr入门级应用; 有什么问题请和我沟通;
异步调用java方法,dwr简单实例! 异步调用java方法,dwr简单实例! 异步调用java方法,dwr简单实例!
这是写了个下拉框的例子,Java 开发人员与网页设计人员的桥梁 DWR,具有javascript和servlet共有的优点,方便客户端用户使用操作,
初学dwr用心学习,努力学习,简单的实例。
DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器...
(网络整理资料)DWR入门与应用,手把手教你从配置到实例的应用
ajax的DWR框架入门例子,包含源代码和调试成功的例子
博文链接:https://lucky520.iteye.com/blog/250084
dwr3的快速入门,一个简单实例.快速掌握dwr3的用法,快速开发
freemarker与struts搭建的完整实例,只适合刚学freemarker的入门一个示例,里面还加入网上的一个dwr配置实例,仅供参考
Ext 2.0.1 & DWR 1入门表格实时编辑器实例.rar 无需数据库,入门首选!