To use this class in your javascript you will need the following script includes:
<script type='text/javascript' src='/AjaxDWR2/dwr/interface/mydwr.js'></script>
<script type='text/javascript' src='/AjaxDWR2/dwr/engine.js'></script>
In addition there is an optional utility script:
<script type='text/javascript' src='/AjaxDWR2/dwr/util.js'></script>
DWR三级联动练习
HelloWorldDemo之后的第二个dwr。
通过dwr调用数据库中的数据,在jsp上显示并进行联动。
mysql建个数据库先。
这里我建立的是DWRTest2,里面有Companys,Departments,Persons三个表(囧 发现单词居然打错了)分别存放公司、部门、职工的信息。
不要忘了导入 mysql、dwr和commons-logging的jar包。
接下来用一个DataSource类,以获取连接(*我把这个类放到了org.yoyo.jdbc包里):
-
package org.yoyo.jdbc;
-
-
import java.sql.Connection;
-
import java.sql.DriverManager;
-
import java.sql.SQLException;
-
-
public class DataSource {
-
-
-
-
try {
-
Class.forName(DRIVER);
-
if(conn == null){
-
}
-
e.printStackTrace();
-
e.printStackTrace();
-
}
-
return conn;
-
}
-
-
}
dwr类(*我把这个类放进了org.yoyo.dwr):
-
ackage org.yoyo.dwr;
-
-
import java.sql.Connection;
-
import java.sql.PreparedStatement;
-
import java.sql.ResultSet;
-
import java.sql.SQLException;
-
import java.util.HashMap;
-
import java.util.Map;
-
-
import org.yoyo.jdbc.DataSource;
-
-
public class DWRTest {
-
-
-
private Connection conn;
-
private PreparedStatement ps;
-
private ResultSet rs;
-
-
Map<String,String> map = new HashMap<String,String>();
-
-
try {
-
conn = DataSource.getConnection();
-
ps = conn.prepareStatement(getCompanySQL);
-
rs = ps.executeQuery();
-
-
while(rs.next()){
-
}
-
-
e.printStackTrace();
-
}
-
-
return map;
-
}
-
-
Map<String,String> map = new HashMap<String,String>();
-
-
try {
-
conn = DataSource.getConnection();
-
ps = conn.prepareStatement(getDepartmentSQL);
-
ps.setInt(1,id);
-
rs = ps.executeQuery();
-
-
while(rs.next()){
-
}
-
-
e.printStackTrace();
-
}
-
-
return map;
-
}
-
-
Map<String,String> map = new HashMap<String,String>();
-
-
try {
-
conn = DataSource.getConnection();
-
ps = conn.prepareStatement(getPersonSQL);
-
ps.setInt(1,id);
-
rs = ps.executeQuery();
-
-
while(rs.next()){
-
}
-
-
e.printStackTrace();
-
}
-
-
return map;
-
}
-
}
接着,配置我们的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">
-
<welcome-file-list>
-
<welcome-file>index.jsp</welcome-file>
-
</welcome-file-list>
-
-
<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>
-
-
</web-app>
在web-inf目录下,新建一个dwr.xml
-
<?xml version="1.0" encoding="UTF-8"?>
-
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 0.4//EN" "http://www.getahead.ltd.uk/dwr/dwr.dtd">
-
<dwr>
-
<allow>
-
<create javascript="mydwr" creator="new">
-
<param name="class" value="org.yoyo.dwr.DWRTest"></param>
-
</create>
-
</allow>
-
</dwr>
这样我们就可以部署到tomcat,进入该项目(假设它的目录是AjaxDWR2,我们就去http://localhost:8080/AjaxDWR2/dwr,就是目录的dwr文件夹)。
如果dwr配置成功,你可以看到里面的类(Classes known to DWR)。点进去可以看到类中的方法。
同时,上面会提示:
将这三句加入到index.jsp里,并修改index.jsp,添加相应的function和html对象:
-
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
-
<html>
-
<head>
-
<title>My JSP 'index.jsp' starting page</title>
-
<script type='text/javascript' src='/AjaxDWR2/dwr/interface/mydwr.js'></script>
-
<script type='text/javascript' src='/AjaxDWR2/dwr/engine.js'></script>
-
<script type='text/javascript' src='/AjaxDWR2/dwr/util.js'></script>
-
<script type='text/javascript'>
-
function init(){
-
mydwr.getCompany(updateCompanyList);
-
}
-
function initList(list){
-
DWRUtil.removeAllOptions(list);
-
DWRUtil.addOptions(list,{'':'choose'});
-
}
-
function updateList(list,data){
-
DWRUtil.addOptions(list,data);
-
}
-
-
function getDepartment(value){
-
if(value!=''){
-
mydwr.getDepartment(value,updateDepartmentList);
-
}
-
}
-
function getPerson(value){
-
if(value!=''){
-
mydwr.getPerson(value,updatePersonList);
-
}
-
}
-
-
function updateCompanyList(data){
-
var company = document.getElementById("company");
-
initList(company);initList(department);initList(person);
-
updateList(company,data);
-
}
-
function updateDepartmentList(data){
-
var department = document.getElementById("department");
-
initList(department);initList(person);
-
updateList(department,data);
-
}
-
function updatePersonList(data){
-
var person = document.getElementById("person");
-
initList(person);
-
updateList(person,data);
-
}
-
</script>
-
</head>
-
-
<body onload="init()">
-
Company: <select id="company" onchange="getDepartment(this.value)"></select><br/>
-
Department: <select id="department" onchange="getPerson(this.value)"></select><br/>
-
Person: <select id = "person"></select>
-
</body>
-
</html>
重新部署,重启服务器后就完成了这个三级联动 = =