This example is to achieve the provincial and municipal two-level linkage, when the choice of a province, the city below the province will be shown in another Drop-down box. In this example, Ajax is passed back to the JSP page by parsing the data from the XML file, where the provinces and cities are the values from the database:
JSP page code:
Copy Code code as follows:
<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%>
<%
String Path = Request.getcontextpath ();
String basepath = request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/";
%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<html>
<head>
</head>
<script type= "Text/javascript" >
var xmlhttp=null;
//Create XMLHttpRequest Object
if (window. XMLHttpRequest) {
xmlhttp=new XMLHttpRequest ();
}else{
Xmlhttp=new activeobject ("Microsoft.XMLHTTP");
}
var url= "getprovince?time=" +new Date (). GetTime ();
function Getsheng () {
Xmlhttp.open ("Post", url,true);
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xmlhttp.send ();
xmlhttp.onreadystatechange=getprovince;
}
function Getprovince () {
if (xmlhttp.readystate==4 && xmlhttp.status==200) {
var xmlfile=xmlhttp.responsexml;
//Get the node of the province
var province=xmlfile.getelementsbytagname ("Province");;
//Get Select label
var Pselect=document.getelementbyid ("Sheng");
//Loop out XML file province information
for (Var i=0;i<province.length;i++) {
var shorter=province[i].getattribute ("name");
var Provincename=province[i].text;
//Loops put the province information into the Select
Pselect.options.add (New Option (Provincename,shorter));//(Text,value)
}
}
}
function getcity () {
Xmlhttp.open ("Post", url,true);
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
var Province=document.getelementbyid ("Sheng"). Value;
alert ("Province:" +province);
xmlhttp.send ("province=" +province);
xmlhttp.onreadystatechange=setcity;
}
function setcity () {
if (xmlhttp.readystate==4 && xmlhttp.status==200) {
var City=document.getelementbyid ("City");
var cityxml=xmlhttp.responsexml;
city.options.length=0;
var citys=cityxml.getelementsbytagname ("City");
for (Var i=0;i<citys.length;i++) {
var Cityname=citys[i].text;
alert (cityname);
City.options.add (New Option (Cityname,cityname));
}
}
}
</script>
<body onload= "Getsheng ()" >
Province: <select name= "sheng" id= "Sheng" onchange= "getcity ()" >
<option> Please select </option>
</select>
: <select name= "City" id= "Town" >
</select>
</body>
</html>
servlet Code:
Copy Code code as follows:
public void DoPost (HttpServletRequest request, HttpServletResponse Response)
throws Servletexception, IOException {
request.setcharacterencoding ("Utf-8");
String province=request.getparameter ("province");
if (province!=null) {
sendcity (request,response,province);
}else{
Shengdao sd=new Shengdao ();
list<sheng> List=sd.selall ();
Response.setcharacterencoding ("Utf-8");
PrintWriter out=response.getwriter ();
Response.setcontenttype ("Text/xml");
Out.println ("<?xml version= ' 1.0 ' encoding= ' UTF-8 ')";
Out.println ("<china>");
for (Sheng sheng:list) {
Out.print ("<province name=" "+sheng.getshorter () +" ' > "+sheng.getprovince () +" </province> ");
Out.println ();
}
Out.println ("</china>");
}
public void sendcity (HttpServletRequest request, HttpServletResponse response,string shorter) {
Try{
Request.setcharacterencoding ("Utf-8");
} catch (Unsupportedencodingexception E1) {
E1.printstacktrace ();
}
try {
response.setcharacterencoding ("Utf-8");
PrintWriter out=response.getwriter ();
Response.setcontenttype ("Text/xml");
Shengdao sd=new Shengdao ();
list<city> List=sd.selall (shorter);
Out.println ("<?xml version= ' 1.0 ' encoding= ' UTF-8 ')";
Out.println ("<province>");
for (city city:list) {
Out.println ("<city name= '" +city.getshorter () + "' >" +city.getcityname () + "</ City> ");
System.out.println ("<city name= '" +city.getshorter () + "' >" +city.getcityname () + "</city>");
}
Out.println ("</province>");
} catch (IOException e) {
E.printstacktrace ();
}
}