dwr 省市联动

daizhaoyun

浏览: 27722 次
性别:
来自: 武汉

最近访客更多访客>>

sky繁星

marongfei

suck949767088

hjt0079

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

dwr 省市联动 city province

首先在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>
  &nbsp;&nbsp;&nbsp;&nbsp;
  城市：<select name="city" id="city"></select>
  
</body>
</html>

分享到：