index.jsp 代码: <%@ 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>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css" mce_href="styles.css"> --> <mce:script type='text/javascript' src="/dwrTest3/dwr/interface/People.js" mce_src="dwrTest3/dwr/interface/People.js"></mce:script> <mce:script type='text/javascript' src="/dwrTest3/dwr/engine.js" mce_src="dwrTest3/dwr/engine.js"></mce:script> <mce:script type='text/javascript' src="/dwrTest3/dwr/util.js" mce_src="dwrTest3/dwr/util.js"></mce:script> </head> <mce:script type="text/javascript"><!-- var peopleCache = { }; function init() { // 当发出ajax请求后,页面显示的提示等待信息; DWRUtil.useLoadingMessage("loading....."); People.getPersonList(function(data){ peopleCache=data; fillTable(data); }); } var cellFuncs = [ function(data) { return data.name; }, function(data) { return data.address; }, function(data) { return data.salary; }, function(data) { return "<input type='button' value='Edit' οnclick='Edit("+data.id+")'/> "+ "<input type='button' value='Delete' οnclick='Delete("+data.id+")'/>"; } ]; function fillTable(data){ // 设定根据 name 来排序 data.sort(function(p1, p2) { return p1.name.localeCompare(p2.name); }); // 填充表格 dwr.util.addRows( "peoplebody",data , cellFuncs, { escapeHtml:false }); // 清空下拉框 DWRUtil.removeAllOptions("selectPerson"); // 添加一个默认选项 // dwr.util.addOptions( "selectPerson",["liubinbin"]); // 填充下拉框 dwr.util.addOptions( "selectPerson",data,'id','name'); // 默认选中编号为 “100” 的下拉框,要在 addOptions 后使用 setValue dwr.util.setValue('selectPerson',"100"); } var index = 0; // 记录要修改 person 下标 function Edit(id){ // 将内容填充到下面的文本框中 for(var i=0;i<peopleCache.length;i++){ if(peopleCache[i].id == id){ index = i; dwr.util.setValues({name:peopleCache[i].name,address:peopleCache[i].address, salary:peopleCache[i].salary,id:peopleCache[i].id}); } } } function queryEdit(){ var person = {id:dwr.util.getValue("id"),name:dwr.util.getValue("name"), address:dwr.util.getValue("address"),salary:dwr.util.getValue("salary")}; // 清零 peopleCache={}; index=0; // 清空 table dwr.util.removeAllRows("peoplebody"); People.editList(person,function(data){ peopleCache=data; fillTable(data); }); } function Delete(id){ // 清零 peopleCache={}; index=0; // 清空 table dwr.util.removeAllRows("peoplebody"); People.delPerson(id,function(data){ peopleCache=data; fillTable(data); if(dwr.util.getValue("id") == id){ // 清空显示框 dwr.util.setValues({ id:-1, name:null, address:null, salary:null }) } }); } function selectPerson(id){ for(var i=0;i<peopleCache.length;i++){ if(peopleCache[i].id == id){ index = i; dwr.util.setValues({name:peopleCache[i].name,address:peopleCache[i].address, salary:peopleCache[i].salary,id:peopleCache[i].id}); } } } function clearPerson(){ // 清空显示框 dwr.util.setValues({ id:-1, name:null, address:null, salary:null }); } // --></mce:script> <body οnlοad="init()"> <h3> All People </h3> <table border="1" width=550> <thead> <tr> <th> Name </th> <th> Address </th> <th> Salary </th> <th> Actions </th> </tr> </thead> <tbody id="peoplebody"> <tr style="display: none;" mce_style="display: none;"> <td> <span id="tableName">Name</span> </td> <td> <span id="tableAddress">Address</span> </td> <td> $ <span id="tableSalary">Salary</span> </td> <td> <input id="edit" type="button" value="Edit" οnclick="editClicked(this.id)" /> <input id="delete" type="button" value="Delete" οnclick="deleteClicked(this.id)" /> </td> </tr> </tbody> </table> <h3> Select Person </h3> <select id="selectPerson" οnchange="selectPerson(this.value)"> </select> <h3> Edit Person </h3> <table class="plain"> <tr> <td> Name: </td> <td> <input id="name" type="text" size="30" /> </td> </tr> <tr> <td> Salary: </td> <td> $ <input id="salary" type="text" size="20" /> </td> </tr> <tr> <td> Address: </td> <td> <input type="text" id="address" size="40" /> </td> </tr> <tr> <td colspan="2" align="right"> <small>(ID=<span id="id">-1</span>)</small> <input type="button" value="Save" οnclick="queryEdit()" /> <input type="button" value="Clear" οnclick="clearPerson()" /> </td> </tr> </table> </body> </html> People.java 代码: package com.hdkj.dwr; import java.util.HashSet; import java.util.*; public class People { public ArrayList personList = new ArrayList(); public ArrayList getPersonList(){ for(int i=0;i<100000;i++){ System.out.println(i); } personList.clear(); Person personBean = new Person(); personBean.setId(100); personBean.setName("liubinbin"); personBean.setAddress("Hui Bei,China"); personBean.setSalary(5000); Person personBean2 = new Person(); personBean2.setId(101); personBean2.setName("wangyang"); personBean2.setAddress("New York,USA"); personBean2.setSalary(6000); Person personBean3 = new Person(); personBean3.setId(102); personBean3.setName("chaijiong"); personBean3.setAddress("Shenzhen,China"); personBean3.setSalary(7000); Person personBean4 = new Person(); personBean4.setId(103); personBean4.setName("liushuchang"); personBean4.setAddress("Beijing,China"); personBean4.setSalary(8000); Person personBean5 = new Person(); personBean5.setId(104); personBean5.setName("zhangfang"); personBean5.setAddress("Shanghai,China"); personBean5.setSalary(9000); personList.add(personBean); personList.add(personBean2); personList.add(personBean3); personList.add(personBean4); personList.add(personBean5); return personList; } public ArrayList editList(Person personBean){ ArrayList list = new ArrayList(); for(int i=0;i<personList.size();i++){ Person bean = (Person)personList.get(i); if(personBean.getId()== bean.getId()){ personList.remove(i); personList.add(personBean); break; } } list = personList ; return list; } public ArrayList delPerson(int id){ ArrayList list = new ArrayList(); for(int i=0;i<personList.size();i++){ Person bean = (Person)personList.get(i); if(id== bean.getId()){ personList.remove(i); break; } } list = personList ; return list; } } Person.java 代码: package com.hdkj.dwr; public class Person { private int id; private String name; private String address; private float salary; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } public float getSalary() { return salary; } public void setSalary(float salary) { this.salary = salary; } } dwr。xml 代码: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd"> <dwr> <allow> <!-- intro - for the test on index.html --> <create creator="new" javascript="People" scope="script"> <param name="class" value="com.hdkj.dwr.People"/> </create> <convert match="com.hdkj.dwr.Person" converter="bean"/> </allow> </dwr> web.xml 代码: <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class>org.directwebremoting.servlet.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> <servlet-mapping> <servlet-name>aa</servlet-name> <url-pattern>/servlet/aa</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>