一、MyEclipse下新建Web工程，加入dwr的相关dwr.jar包到WEB-INF\lib下
-------------------------
二、在web.xml中增加DWR的Servlet配置，如下：
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>uk.ltd.getahead.dwr.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-INFO下新建并配置dwr.xml文件，如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">
<dwr>
<allow>
<create creator="new" javascript="Fenye">
<param name="class" value="com.icss.dwr.MyDwrTestDAO"></param>
</create>
<convert match="com.icss.dwr.FenyeVO" converter="bean"></convert>
</allow>
</dwr>
-----------------------------
四、写服务器端java类，vo、dao类及连接数据库类DBUtil
vo类：
public class FenyeVO {
private int f_no;
private String f_name;
private String f_sex;
public String getF_name() {
return f_name;
}
public void setF_name(String f_name) {
this.f_name = f_name;
}
public int getF_no() {
return f_no;
}
public void setF_no(int f_no) {
this.f_no = f_no;
}
public String getF_sex() {
return f_sex;
}
public void setF_sex(String f_sex) {
this.f_sex = f_sex;
}
}
dao类：
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
public class MyDwrTestDAO {
//查找所有用户并分页显示
public ArrayList selfenye(int num){
ArrayList<FenyeVO> list = new ArrayList<FenyeVO>();
Db db = new Db();
Connection conn = db.getCon();
ResultSet rs = null;
PreparedStatement ps = null;
String sql = "exec proc_fenye @linenum=?";
try{
ps = conn.prepareStatement(sql);
ps.setInt(1, num);
rs = ps.executeQuery();
while(rs.next()){
FenyeVO fenye = new FenyeVO();
fenye.setF_no(rs.getInt("f_no"));
fenye.setF_name(rs.getString("f_name"));
fenye.setF_sex(rs.getString("f_sex"));
list.add(fenye);
}
}catch(SQLException e){
e.printStackTrace();
}finally{
try {
rs.close();
ps.close();
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
return list;
}
//查找对应ID的用户信息
public FenyeVO selOneUser(){
Db db = new Db();
ResultSet rs = null;
PreparedStatement ps = null;
Connection conn = db.getCon();
String sql = "select * from fenye where f_no=?";
FenyeVO fenye = new FenyeVO();
try{
ps = conn.prepareStatement(sql);
ps.setInt(1, 21);
rs = ps.executeQuery();
if(rs.next()){
fenye.setF_no(rs.getInt("f_no"));
fenye.setF_name(rs.getString("f_name"));
fenye.setF_sex(rs.getString("f_sex"));
}
System.out.println("===="+fenye.getF_name());
}catch(SQLException e){
e.printStackTrace();
}finally{
try {
rs.close();
ps.close();
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
return fenye;
}
//删除对应ID的用户
public boolean deleteUser(FenyeVO fenye){
Db db = new Db();
ResultSet rs = null;
PreparedStatement ps = null;
Connection conn = db.getCon();
String sql = "delete from fenye where f_no=?";
try{
ps = conn.prepareStatement(sql);
ps.setInt(1, fenye.getF_no());
if(ps.execute()){
return true;
}
}catch(SQLException e){
e.printStackTrace();
}finally{
try {
rs.close();
ps.close();
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
return false;
}
}
-----------------------------
五、写jsp页面，引入engine.js,util.js,后台对应的js文件名，这里是Fenye.js，如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>My JSP 'Dwr.jsp' starting page</title>
<script type='text/javascript' src='dwr/interface/Fenye.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type="text/javascript">
dwr.engine.setAsync(false);
dwr.engine.setErrorHandler(function(msg){alert(msg)});
var page=0;
//显示下拉菜单项的
function getSelect(){
Fenye.selfenye(dwr.util.getValue("txt1"),showSelect);
}
//加载下拉菜单值
function showSelect(data){
dwr.util.removeAllOptions("sel");
dwr.util.addOptions("sel",data,"f_sex","f_name");
}
//跳到上一面
function laxtpage(){
if(page <= 0){
page=0;
getStr();
}else{
page--;
getStr();
}
}
//跳到下一页
function nextpage(){
page++;
getStr();
}
//显示上下跳转分布
function getStr(){
// Fenye.selfenye(dwr.util.getValue("txt1"),show);
Fenye.selfenye(page,show);
}
//显示跳到对应页面
function jumppage(){
page = dwr.util.getValue("jumppage");
Fenye.selfenye(dwr.util.getValue("jumppage"),show);
}
//用于向listtable中加入返回的数值，用data参数传递，进入cellFunces处理，
//在options中处理要向listtable里面加入的元素
function show(data){
dwr.util.removeAllRows("listtable");
dwr.util.addRows("listtable",data,cellFuncs,options);
}
//返回所填充的具体数值
var cellFuncs=[
function(obj){return obj.f_no;},
function(obj){return obj.f_name;},
function(obj){return obj.f_sex;},
function(obj){
var oDiv = document.createElement("div");
var btn = document.createElement("input");
btn.type="button";
btn.value="delete";
btn.onclick=function(){
var o = {f_no:obj.f_no};
Fenye.deleteUser(o);
}
btn1 = document.createElement("input");
btn1.type="button";
btn1.value="update";
btn1.onclick = function(){
//var o = {proid:200,proname:"hello"}
//Test.deletePro(o);
}
var a = document.createElement("<a href='Del.jsp?id="+obj.proid+"'>");
a.innerHTML = "del";
oDiv.appendChild(btn);
oDiv.appendChild(btn1);
oDiv.appendChild(a);
return oDiv;
}
]
//创建填充的列以及列的style
var options={
cellCreator:function(options){
var oTd=options.document.createElement("td");
oTd.style.textAlign="center";
if(options.cellNum==0){
// oTd.style.textAlign="center";
oTd.style.fontWeight="bold";
oTd.style.color="red";
}
return oTd;
}
}
</script>
</head>
<body onload="getStr()">
<input type="text" id="txt"/>
<input type="button" value="query" onclick="query()"/>
<br/>
产品ID：<span id="s1"></span><br/>
产品名称：<span id="s2"></span>
<br/>
<input type="text" id="txt1"/>
<input type="button" value="getSelect" onclick="getSelect()"/>
<select id="sel"></select>
<table border="1">
<thead>
<tr>
<th width="100">ID</th>
<th width="100">Name</th>
<th width="100">SEX</th>
<th width="100"> </th>
</tr>
</thead>
<tbody id="listtable"></tbody>
</table>
<input type="button" onclick="laxtpage()" value="上一页" />
<input type="button" value="跳到" size="5px" onclick="jumppage()" />
<input type="text" id="jumppage"/>
<input type="button" onclick="nextpage()" value="下一页"/>
</body>
</html>
分享到：
相关推荐
AJAX-DWR下拉框级联是Web...总的来说，AJAX-DWR下拉框级联是提升Web应用交互性和效率的有效手段，通过DWR与数据库的实时交互，实现了用户选择的动态响应。同时，理解并掌握用户身份验证机制对保障网站安全至关重要。
Ajax (Asynchronous JavaScript and XML) 是一种在无需重新加载整个网页的情况下更新部分网页的技术，而Direct Web Remoting (DWR) 是一个Java库，它使得在JavaScript和Java之间进行交互变得简单，允许Web应用程序...
AJAX-dwr实现增删改查的示例代码是一个非常实用的学习资源，对于初学者来说，它可以帮助理解DWR的工作原理和配置方式，以及如何在实际项目中利用DWR进行动态数据交互。通过这个例子，开发者可以进一步掌握AJAX技术，...
3. **DWR配置**：创建一个`dwr.xml`配置文件，声明哪些Spring Bean中的方法可以被DWR暴露，以及如何映射到JavaScript接口。 4. **生成JavaScript接口**：DWR会自动生成对应的JavaScript接口，这些接口可以直接在...
### DWR在AJAX中的应用及注意事项 #### 一、DWR简介与配置 DWR（Direct Web Remoting）是一种简化Ajax开发的技术框架，它可以让JavaScript像调用本地方法一样直接调用服务器端的方法，从而简化了前端和后端之间的...
3. **配置文件**：DWR配置文件定义了哪些Java类和方法可供JavaScript调用。 4. **安全机制**：DWR提供了基于签名的安全机制，防止恶意脚本攻击。 **使用DWR的步骤：** 1. **添加依赖**：在Java项目中引入DWR的JAR...
**服务器端Ajax框架——DWR实践总结** ...总结来说，DWR是一个强大的服务器端Ajax框架，它简化了Java与JavaScript之间的通信，提高了Web应用的交互性。通过实践和研究DWR，开发者能够构建出更加流畅、高效的Web应用。
1. **DWR Engine**：这是DWR的核心，负责处理所有与服务器的通信，包括AJAX请求的发送和响应的接收。 2. **DWR Servlet**：这是一个部署在Web应用中的Servlet，用于接收和转发来自客户端的请求。 3. **JavaScript ...
- **DWR配置文件（dwr.xml）**：用于定义哪些Java类可以在客户端被调用，以及如何调用。 - **JavaScript接口**：DWR自动生成的JavaScript代码，使客户端可以直接调用服务器端的方法。 **2. 配置DWR** 要使用DWR，...
2. **DWR配置**：在`dwr.xml`文件中配置`HelloService`类。 3. **JSP页面**：创建一个JSP页面，在其中引入DWR的JavaScript库，并编写JavaScript代码调用`HelloService`类的方法。 #### 四、DWR的配置详解 ##### ...
DWR简化了Ajax应用的开发，提供了自动转换Java对象到JavaScript对象的功能，以及反向调用（Reverse Ajax）的能力，即服务器可以主动推送数据到客户端。 在"基于J2EE的ajax宝典-dwr部分源码"中，我们可以深入学习...
DWR (Direct Web Remoting) 是一个强大的AJAX框架，它允许JavaScript与Java在浏览器和服务器之间进行直接通信，实现了异步数据交换，从而提供了丰富的用户体验。DWR使得开发者能够轻松地在客户端使用JavaScript调用...
DWR消除了传统AJAX的复杂性，使得开发者可以直接在前端与后端进行交互，而无需编写大量的XMLHttpRequest代码。DWR提供了一种安全、高效的远程调用机制，使得EXT组件能够轻松地与服务器进行数据交换。 Hibernate则是...
**DWR（Direct Web ...通过学习和实践这些资源，开发者可以深入理解DWR如何与Ajax结合，实现高效的Web应用交互。同时，掌握DWR可以帮助开发者避免编写复杂的JavaScript网络请求代码，提高开发效率并提升应用性能。
在提供的“AJAX框架DWR简单应用.pdf”文件中，你可能会找到关于如何设置DWR环境、编写Java接口、配置DWR配置文件、在前端JavaScript中使用DWR，以及示例代码和实际运行效果的详细教程。这个文件是学习和理解DWR工作...
首先，DWR.xml配置文件是DWR的核心，它是DWR与应用服务器交互的桥梁。在DWR.xml中，你需要定义允许与客户端进行通信的Java类和方法。配置文件通常包含以下几部分： 1. `<dwr>`根元素：设置全局属性，如允许的IP地址...
Direct Web Remoting (DWR) 是一个开源Java库，它允许Web应用程序在客户端JavaScript和服务器端Java代码之间进行实时通信，无需使用XMLHttpRequest或JSONP等传统Ajax技术。DWR通过提供一套简单易用的API，使得开发...
总结来说，J2EE中集成Ajax和DWR涉及的主要步骤包括：配置`dwr.xml`以定义可调用的Java对象和方法，设置`web.xml`中的DWR Servlet以处理Ajax请求，引入DWR的依赖库，并在HTML页面中引入DWR的JavaScript库。...
DWR是Web应用中的一种Ajax技术，它允许开发者直接在JavaScript中调用服务器端的方法，仿佛它们是本地函数一样。DWR通过自动化处理HTTP请求和响应，简化了客户端和服务器之间的通信。这样，开发者无需手动编写...