dwr 省市联动
首先在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>