实体类City
public class City {
private Integer cityId;
private String cityName;
private Integer provinceId;
public City() {
super();
}
public City(String cityName, Integer provinceId) {
super();
this.cityName = cityName;
this.provinceId = provinceId;
}
public City(Integer cityId, String cityName, Integer provinceId) {
super();
this.cityId = cityId;
this.cityName = cityName;
this.provinceId = provinceId;
}
public Integer getCityId() {
return cityId;
}
public void setCityId(Integer cityId) {
this.cityId = cityId;
}
public String getCityName() {
return cityName;
}
public void setCityName(String cityName) {
this.cityName = cityName;
}
public Integer getProvinceId() {
return provinceId;
}
public void setProvinceId(Integer provinceId) {
this.provinceId = provinceId;
}
}
服务器端:DistrictServices
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {}
页面:
<script src="json2.js" language="javascript" type="text/javascript"></script>
<script language="javascript">
var xmlhttp;//声明浏览器初始化对象变量
function changeCities() {
var f = document.myform;
var provinceId = f.provinceId.value;
doAjax("DistrictServices?op=changeCities&provinceId=" + provinceId);
}
function doAjax(url) {
if (window.XMLHttpRequest) // firefox
{
xmlhttp = new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") // IE
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//判断XMLHttpRequest对象是否成功创建
if (!xmlhttp) {
alert("不能创建XMLHttpRequest对象实例");
return false;
}
//创建请求结果处理程序
xmlhttp.onreadystatechange = processReuqest;
xmlhttp.open("post", url, true);
//如果以post方式请求,必须要添加
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(null);
}
function processReuqest() {
if (xmlhttp.readyState == 4) {//等于4代表请求完成
if (xmlhttp.status == 200) {
//responseText表示请求完成后,返回的字符串信息
if (xmlhttp.responseText == "false") {
alert("暂无城市信息");
} else {
var object =JSON.parse(xmlhttp.responseText);
var cities=object.cities;
var citySelect = document.getElementById("cityId");
citySelect.length=0;
for(var i =0;i<cities.length;i++)
{
var option =document.createElement("option");
option.text=cities[i].cityName;
option.value=cities[i].cityId;
citySelect.options.add(option);
}
}
} else {
alert("请求处理返回的数据有错误");
}
}
}
</script>
<%
ProvinceDao provinceDao=new ProvinceDao();
List<Province> provinces=provinceDao.getProvinces();
%>
<form id="myform" name="myform" method="post" action="DistrictServices?op=save">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr height="50">
<td>请选择省份:</td>
<td>
<select name="provinceId" id="provinceId" onchange="changeCities()">
<%for(int i=0;i<provinces.size();i++) {
Province province=provinces.get(i);
%>
<option value=<%=province.getProvinceId()%>><%=province.getProvinceName() %></option>
<%} %>
</select>
</td>
</tr>
<tr height="50">
<td>请选择城市:</td>
<td>
<select name="cityId" id="cityId">
<option value="请选择城市">请选择城市</option>
</select>
</td>
</tr>
<tr height="50">
<td>请输入城区:</td>
<td>
<input name="districtId" type="text" />
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提交" />
<input type="reset" value="重置" /></td>
</tr>
</table>
</form>