首先在WebContent目录下新建一个目录dwr,在该文件夹在存放 engine.js 和 util.js
1.在web.xml中进行配置
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>dwrDemo</display-name> <servlet> <servlet-name>dwr</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</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> </web-app>
2.bean类的创建
package com.daizhaoyun.bean; public class City { private int id; private String name; public City() { } public City(int id, String name) { super(); this.id = id; this.name = name; } 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; } }
package com.daizhaoyun.bean; import java.util.ArrayList; import java.util.List; public class Province { private int id; private String name; private List<City> cities = new ArrayList<City>(); public Province(){ } 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 List<City> getCities() { return cities; } public void setCities(List<City> cities) { this.cities = cities; } }
3.核心类的创建
package com.daizhaoyun.ajaxservice; import java.util.ArrayList; import java.util.List; import com.daizhaoyun.bean.City; import com.daizhaoyun.bean.Province; public class ProvinceService { private List<Province> provinces = new ArrayList<Province>(); /** * 根据省份id,获取城市列表 * @param id * @return */ public List<City> getCitysByProvinceId(int id) { for(Province p: provinces){ if(p.getId()==id){ return p.getCities(); } } return null; } public ProvinceService(){ Province hubei = new Province(); hubei.setId(1000); hubei.setName("湖北省"); hubei.getCities().add(new City(1001, "武汉市")); hubei.getCities().add(new City(1002, "荆州市")); hubei.getCities().add(new City(1003, "黄石市")); Province hunan = new Province(); hunan.setId(2000); hunan.setName("湖南省"); hunan.getCities().add(new City(2001, "长沙市")); hunan.getCities().add(new City(2002, "岳阳市")); hunan.getCities().add(new City(2003, "益阳市")); provinces.add(hubei); provinces.add(hunan); } public List<Province> getProvinces(){ return provinces; } }
4.dwr.xml的配置
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr> <allow> <create javascript="ProvinceService" creator="new"> <param name="class" value="com.daizhaoyun.ajaxservice.ProvinceService"></param> </create> <convert match="com.daizhaoyun.bean.City" converter="bean"> <param name="include" value="id,name"></param> </convert> <convert match="com.daizhaoyun.bean.Province" converter="bean"> <param name="include" value="id,name,cities"></param> </convert> </allow> </dwr>
5.页面的设计
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="dwr/engine.js"></script> <script type="text/javascript" src="dwr/util.js"></script> <script type="text/javascript" src="dwr/interface/ProvinceService.js"></script> <script type="text/javascript"> window.onload=function(){ ProvinceService.getProvinces(callBackFillProvince); }; function callBackFillProvince(data){ DWRUtil.removeAllOptions("province"); DWRUtil.addOptions("province",data,"id","name"); refreshCity($("province").value); } function refreshCity(provinceId){ ProvinceService.getCitysByProvinceId(provinceId,callBackFillCity); } function callBackFillCity(data){ DWRUtil.removeAllOptions("city"); DWRUtil.addOptions("city",data,"id","name"); } </script> </head> <body> 省份:<select name="province" id="province" onchange="refreshCity(this.value)"></select> 城市:<select name="city" id="city"></select> </body> </html>