首先在eclipse里新建一个web项目，并引入dwr.jar和common—logging.jar，接着开始写代码吧
web.xml
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> <web-app> <servlet> <servlet-name>dwr-invoker</servlet-name> <display-name>DWR Servlet</display-name> <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>false</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> </web-app>
dwr.xml
<create creator="new" javascript="DwrTest"> <param name="class" value="com.dwr.list.DwrTest"/> </create> <convert match="com.dwr.list.Admin" converter="bean" > <param name="include" value="id,admin_Name,admin_Pwd,mark_id" /> </convert>
Admin.java
/** * */ package com.dwr.list; /** * @author cyang * */ public class Admin { private int id; private String admin_Name; private String admin_Pwd; private int mark_id; /** * */ public Admin() { super(); // TODO Auto-generated constructor stub } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getAdmin_Name() { return admin_Name; } public void setAdmin_Name(String admin_Name) { this.admin_Name = admin_Name; } public String getAdmin_Pwd() { return admin_Pwd; } public void setAdmin_Pwd(String admin_Pwd) { this.admin_Pwd = admin_Pwd; } public int getMark_id() { return mark_id; } public void setMark_id(int mark_id) { this.mark_id = mark_id; } }
DWRTest.java
/** * */ package com.dwr.list; import java.util.List; /** * @author cyang * */ public class DwrTest { TestDao dao = new TestDao(); public List<Admin> Send(int mark) { return dao.Send(mark); } }
TestDao,我这里方便大家模拟查询数据库，其实是自造的数据哦。
接下来就是页面的展现了，我把jsp和js放在一起，方便大家：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>DWR </title> <mce:script type="text/javascript" src="dwr/interface/DwrTest.js" mce_src="dwr/interface/DwrTest.js"></mce:script> <mce:script type="text/javascript" src="dwr/engine.js" mce_src="dwr/engine.js"></mce:script> <mce:script type="text/javascript" src="dwr/util.js" mce_src="dwr/util.js"></mce:script> <mce:script type="text/javascript"><!-- function CallBack(data) { if (data.length == 0) { alert("参数传递出现错误!"); }else{ for(var i=0;i<data.length;i++){ addRow(data[i].admin_Name,data[i].admin_Pwd,data[i].mark_id); // 表格添加一行 } } } function Send(mark){ DwrTest.Send(mark,CallBack); } function showTable(mark){ var i=1; for(i=form1.maxrow.value; i>0 ; i--) { deleteRow(i); } form1.maxrow.value = 0; Send(mark); // 通过mark参数来判断要动态显示的内容 } function deleteRow(index){ var tableObj=document.getElementById("mytable"); tableObj.deleteRow(index); } function addRow(username,password,mark_id){ var tableObj=document.getElementById("mytable"); var newRowObj=tableObj.insertRow(tableObj.rows.length); var newColName=newRowObj.insertCell(newRowObj.cells.length); var newColPwd=newRowObj.insertCell(newRowObj.cells.length); var newColMrk=newRowObj.insertCell(newRowObj.cells.length); newColName.innerHTML=username; newColPwd.innerHTML=password; newColMrk.innerHTML=mark_id; form1.maxrow.value = parseInt(form1.maxrow.value) + 1; } // --></mce:script> </head> <body> <form name="form1" > <p align="center"> <input type="button" value="用户类别一 " onmouseover="showTable(1)"> <input type="button" value="用户类别二" onmouseover="showTable(2)"> <input type="button" value="用户类别三" onmouseover="showTable(3)"> <input type="button" value="用户类别四" onmouseover="showTable(4)"> </p> <table width="50%" id="mytable" border="1" bordercolor="whitesmoke"> <tr align="center"><td>用户名</td><td>密码</td><td>类别</td></tr> </table> <input type="hidden" name="maxrow" value="0"> </form> </body> </html>
大功告成，运行一下试试吧，我试过了可以的
