Liny_@NotePad

沉迷ACG中

DWR三级联动练习

YOYO posted @ 2008年10月14日 06:17 in 【Web开发】客户端 with tags DWR ajax 三级联动 , 3347 阅读

HelloWorldDemo之后的第二个dwr。
通过dwr调用数据库中的数据，在jsp上显示并进行联动。

mysql建个数据库先。
这里我建立的是DWRTest2，里面有Companys,Departments,Persons三个表（囧 发现单词居然打错了）分别存放公司、部门、职工的信息。

不要忘了导入 mysql、dwr和commons-logging的jar包。

接下来用一个DataSource类，以获取连接（*我把这个类放到了org.yoyo.jdbc包里）：

  1. package org.yoyo.jdbc;
  2.  
  3. import java.sql.Connection;
  4. import java.sql.DriverManager;
  5. import java.sql.SQLException;
  6.  
  7. public class DataSource {
  8.        
  9.         private static String DRIVER = "com.mysql.jdbc.Driver";
  10.         private static String URL = "jdbc:mysql://localhost:3306/DWRTest2";
  11.         private static String USERNAME = "root";
  12.         private static String PASSWORD = "";
  13.        
  14.         private static Connection conn = null;
  15.        
  16.         public static Connection getConnection(){
  17.                 try {
  18.                         Class.forName(DRIVER);
  19.                         if(conn == null){
  20.                                 conn = DriverManager.getConnection(URL,USERNAME,PASSWORD);
  21.                         }
  22.                 } catch (ClassNotFoundException e) {
  23.                         e.printStackTrace();
  24.                 } catch (SQLException e) {
  25.                         e.printStackTrace();
  26.                 }
  27.                 return conn;
  28.         }
  29.  
  30. }

dwr类（*我把这个类放进了org.yoyo.dwr）：

  1. ackage org.yoyo.dwr;
  2.  
  3. import java.sql.Connection;
  4. import java.sql.PreparedStatement;
  5. import java.sql.ResultSet;
  6. import java.sql.SQLException;
  7. import java.util.HashMap;
  8. import java.util.Map;
  9.  
  10. import org.yoyo.jdbc.DataSource;
  11.  
  12. public class DWRTest {
  13.        
  14.         private String getCompanySQL = "select * from companys";
  15.         private String getDepartmentSQL = "select * from departments where companyID = ?";
  16.         private String getPersonSQL = "select * from persons where departmentID = ?";
  17.  
  18.         private Connection conn;
  19.         private PreparedStatement ps;
  20.         private ResultSet rs;
  21.        
  22.         public Map getCompany(){
  23.                 Map<String,String> map = new HashMap<String,String>();
  24.                
  25.                 try {
  26.                         conn = DataSource.getConnection();
  27.                         ps = conn.prepareStatement(getCompanySQL);
  28.                         rs = ps.executeQuery();
  29.                        
  30.                         while(rs.next()){
  31.                                 map.put(new Integer(rs.getInt(1)).toString(), rs.getString(2));
  32.                         }
  33.                        
  34.                 } catch (SQLException e) {
  35.                         e.printStackTrace();
  36.                 }
  37.                
  38.                 return map;
  39.         }
  40.        
  41.         public Map getDepartment(int id){
  42.                 Map<String,String> map = new HashMap<String,String>();
  43.                
  44.                 try {
  45.                         conn = DataSource.getConnection();
  46.                         ps = conn.prepareStatement(getDepartmentSQL);
  47.                         ps.setInt(1,id);
  48.                         rs = ps.executeQuery();
  49.                        
  50.                         while(rs.next()){
  51.                                 map.put(new Integer(rs.getInt(1)).toString(), rs.getString(2));
  52.                         }
  53.                        
  54.                 } catch (SQLException e) {
  55.                         e.printStackTrace();
  56.                 }
  57.                
  58.                 return map;
  59.         }
  60.        
  61.         public Map getPerson(int id){
  62.                 Map<String,String> map = new HashMap<String,String>();
  63.                
  64.                 try {
  65.                         conn = DataSource.getConnection();
  66.                         ps = conn.prepareStatement(getPersonSQL);
  67.                         ps.setInt(1,id);
  68.                         rs = ps.executeQuery();
  69.                        
  70.                         while(rs.next()){
  71.                                 map.put(new Integer(rs.getInt(1)).toString(), rs.getString(2));
  72.                         }
  73.                        
  74.                 } catch (SQLException e) {
  75.                         e.printStackTrace();
  76.                 }
  77.                
  78.                 return map;
  79.         }
  80. }

接着，配置我们的web.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app version="2.4"
  3.         xmlns="http://java.sun.com/xml/ns/j2ee"
  4.         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  5.         xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
  6.         http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  7.   <welcome-file-list>
  8.     <welcome-file>index.jsp</welcome-file>
  9.   </welcome-file-list>
  10.  
  11.   <servlet>
  12.         <servlet-name>dwr-invoker</servlet-name>
  13.         <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
  14.         <init-param>
  15.               <param-name>debug</param-name>
  16.               <param-value>true</param-value>
  17.         </init-param>
  18.   </servlet>
  19.  
  20.   <servlet-mapping>
  21.         <servlet-name>dwr-invoker</servlet-name>
  22.         <url-pattern>/dwr/*</url-pattern>
  23.   </servlet-mapping>
  24.  
  25. </web-app>

在web-inf目录下，新建一个dwr.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 0.4//EN" "http://www.getahead.ltd.uk/dwr/dwr.dtd">   
  3. <dwr>
  4.         <allow>
  5.                 <create javascript="mydwr" creator="new">
  6.                         <param name="class" value="org.yoyo.dwr.DWRTest"></param>
  7.                 </create>
  8.         </allow>
  9. </dwr>

这样我们就可以部署到tomcat，进入该项目（假设它的目录是AjaxDWR2，我们就去http://localhost:8080/AjaxDWR2/dwr，就是目录的dwr文件夹）。

如果dwr配置成功，你可以看到里面的类（Classes known to DWR）。点进去可以看到类中的方法。
同时，上面会提示：

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> 

将这三句加入到index.jsp里，并修改index.jsp，添加相应的function和html对象：

  1. <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <html>
  4.   <head>
  5.     <title>My JSP 'index.jsp' starting page</title>
  6.     <script type='text/javascript' src='/AjaxDWR2/dwr/interface/mydwr.js'></script>
  7.     <script type='text/javascript' src='/AjaxDWR2/dwr/engine.js'></script>
  8.     <script type='text/javascript' src='/AjaxDWR2/dwr/util.js'></script>
  9.     <script type='text/javascript'>
  10.         function init(){
  11.             mydwr.getCompany(updateCompanyList);
  12.         }
  13.         function initList(list){
  14.             DWRUtil.removeAllOptions(list);
  15.             DWRUtil.addOptions(list,{'':'choose'});
  16.         }
  17.         function updateList(list,data){
  18.             DWRUtil.addOptions(list,data);
  19.         }
  20.        
  21.         function getDepartment(value){
  22.             if(value!=''){
  23.                 mydwr.getDepartment(value,updateDepartmentList);
  24.             }
  25.         }
  26.         function getPerson(value){
  27.             if(value!=''){
  28.                 mydwr.getPerson(value,updatePersonList);
  29.             }
  30.         }
  31.        
  32.         function updateCompanyList(data){
  33.             var company = document.getElementById("company");
  34.             initList(company);initList(department);initList(person);
  35.             updateList(company,data);
  36.         }
  37.         function updateDepartmentList(data){
  38.             var department = document.getElementById("department");
  39.             initList(department);initList(person);
  40.             updateList(department,data);
  41.         }
  42.         function updatePersonList(data){
  43.             var person = document.getElementById("person");
  44.             initList(person);
  45.             updateList(person,data);
  46.         }
  47.     </script>
  48.   </head>
  49.  
  50.   <body onload="init()">
  51.     Company: <select id="company" onchange="getDepartment(this.value)"></select><br/>
  52.     Department: <select id="department" onchange="getPerson(this.value)"></select><br/>
  53.     Person: <select id = "person"></select>
  54.   </body>
  55. </html>

重新部署，重启服务器后就完成了这个三级联动 = =

Small_feed 评论 (0)

登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter