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的基本概念和使用方法。教程内容可能包括以下几个核心知识点: 1. **DWR概述**:讲解DWR的基本理念,如何通过HTTP协议实现JavaScript与Java之间...
在本文中,我们将深入探讨DWR(Direct Web Remoting)技术,通过一个具体的入门实例来了解如何使用DWR与Ajax进行交互。DWR是一种开源Java库,它允许Web应用程序在客户端JavaScript和服务器端Java之间进行实时、双向...
### dwr实例教程知识点解析 #### 一、DWR简介及功能特点 DWR(Direct Web Remoting)是一种简化Ajax应用开发的技术框架。它能够使客户端的JavaScript代码直接调用服务器端的Java方法,实现数据的实时交互。与传统...
通过这个入门实例,你可以了解到DWR如何简化了前端与后端的交互,使得开发者能够在不刷新整个页面的情况下更新部分内容,提高Web应用的响应速度和用户体验。同时,DWR还提供了丰富的安全配置和优化选项,以适应不同...
本入门实例将带你深入理解DWR的基本概念和使用方法。 首先,DWR的核心是它提供的远程调用API,它允许JavaScript直接调用服务器上的Java方法。这意味着前端开发者可以轻松地更新页面内容,而无需刷新整个页面。在...
DWR入门涉及以下几个关键知识点: 1. **配置DWR**:首先,你需要在项目中集成DWR,这通常包括在`web.xml`中配置DWR的Servlet,以及在项目的类路径下创建`dwr.xml`配置文件,用于声明暴露给JavaScript的Java类和方法...
这个"**dwr 入门实例**"旨在帮助新手快速理解和应用DWR。 在DWR中,主要涉及以下核心概念: 1. **Reverse Ajax(反向Ajax)**: DWR的核心功能是实现浏览器与服务器之间的双向通信,即不仅服务器能向浏览器推送数据...
DWR(Direct Web Remoting)是一...通过学习这套DWR入门资料,你将能够熟练地使用DWR创建动态、交互性强的Web应用,提高开发效率,同时提升用户体验。实践中不断探索,理论与实战相结合,将助你在Web开发领域更进一步。
接下来,我们来看一个简单的DWR入门实例: 1. **环境准备**:确保你的项目已经集成了Servlet容器(如Tomcat),并添加了DWR的依赖库到类路径。 2. **创建Java类**:首先,创建一个简单的Java类,例如`HelloWorld....
这是写了个下拉框的例子,Java 开发人员与网页设计人员的桥梁 DWR,具有javascript和servlet共有的优点,方便客户端用户使用操作,
通过这个“最完整的DWR入门文档”,你将能够学习到如何从零开始搭建一个DWR应用,包括实例代码、配置示例和详细的解释。案例部分则可以帮助你将理论知识应用到实践中,解决实际问题。 总之,DWR是AJAX开发的一个...
10. **实例分析**:在"DWR入门demo"中,你可能会看到一个简单的例子,如创建一个计数器服务,客户端通过JavaScript调用服务器的增减方法,实时更新页面上的计数值。 通过深入学习和实践这个"DWR入门demo",你将能够...
DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器...
在"**dwr入门资料,简单入门,让你轻松掌握dwr**"的资源中,你可以期待学习到以下关键知识点: 1. **DWR的基本概念**:理解DWR的核心概念,如Remoting、Reverse Ajax和Caching,以及如何通过DWR实现浏览器与服务器...
这个入门教程将引导你了解DWR的基本概念、安装配置以及实际应用。 1. **DWR的基本概念** DWR的核心功能是提供了一种简单的方式,使JavaScript能够调用服务器端的Java方法,反之亦然。这种方式称为远程方法调用...
在这个"入门例子(eclipse 工程)"中,你将找到一个演示如何在Eclipse环境中配置和使用DWR的实例,特别关注的是如何实现图片的无刷新显示。 1. **DWR的基本概念**: - **Web Remoting**:DWR的核心是提供了一种...
DWR(Direct Web Remoting)是一个开放源码的JavaScript库,它使得在...通过学习这个例子,你可以快速掌握DWR的基本用法,并将其应用到实际的AJAX项目中,提升用户体验,实现页面的无刷新更新和后台数据的实时交互。
在本教程中,我们将学习如何使用DWR 3.0进行快速入门,通过一个简单的“Hello, World”实例来理解其工作流程。 首先,我们需要创建一个Web工程,并导入DWR 3.0的相关库。这通常包括DWR的核心JAR包和可能需要的日志...