Entity class 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;
}
}
Server side: Districtservices
public void DoPost (HttpServletRequest request, httpservletresponse response) throws Servletexception, ioexcept Ion {
Response.setcontenttype ("text/html");
Response.setcharacterencoding ("GBK");
PrintWriter out = Response.getwriter ();
Citydao citydao=new Citydao ();
String op=request.getparameter ("Op");
if ("Changecities". Equals (OP)) {
String provinceid=request.getparameter ("Provinceid");
if (provinceid!=null&&! "". Equals (Provinceid)) {
Integer Id=integer.parseint (Provinceid);
List<city> Cities=citydao.getcitiesbyprovinceid (ID);
Jsonobject json = new Jsonobject ();
Json.put ("Cities", cities);
Out.println (Json.tostring ());
}else{
Out.print (FALSE);
}
}
Out.flush ();
Out.close ();
}
Page:
<script src= "Json2.js" language= "JavaScript" type= "Text/javascript" ></script>
<script language= "JavaScript" >
Var xmlhttp;//declares that the browser initializes an object variable
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");
}
To determine whether the XMLHttpRequest object was successfully created
if (!xmlhttp) {
Alert ("Cannot create a XMLHttpRequest object instance");
return false;
}
Create a request result handler
Xmlhttp.onreadystatechange = Processreuqest;
Xmlhttp.open ("Post", url, True);
If you request it by post, you must add the
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xmlhttp.send (NULL);
}
function Processreuqest () {
if (xmlhttp.readystate = = 4) {//equals 4 for request completion
if (Xmlhttp.status = = 200) {
ResponseText indicates that the string information returned after the request is completed
if (Xmlhttp.responsetext = = "false") {
Alert ("No city Information");
} 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 ("Request to process returned data with errors");
}
}
}
</script>
<%
Provincedao provincedao=new Provincedao ();
List<province> provinces=provincedao.getprovinces ();
%>
<form id= "MyForm" name= "MyForm" method= "post" action= "Districtservices?op=save" >
<table width= "border=" 0 "cellspacing=" 0 "cellpadding=" 0 ">
<tr height= ">"
<td> Please select Province:</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= ">"
<td> Please select City:</td>
<td>
<select name= "Cityid" id= "Cityid" >
<option value= "Please choose City" > Please choose City </option>
</select>
</td>
</tr>
<tr height= ">"
<td> Please enter the urban:</td>
<td>
<input name= "Districtid" type= "text"/>
</td>
</tr>
<tr>
<TD colspan= "2" align= "center" ><input type= "Submit" value= "submitted"/>
<input type= "reset" value= "reset"/></td>
</tr>
</table>
</form>