In this example, the province and city levels are linked. If you select a city that saves time, the city that saves the time will be displayed in another drop-down box. In this example, AJAX transfers the data obtained by parsing the XML file back to the jsp page, where the province and city are the values obtained from the database:
Jsp page code:
Copy codeThe Code is 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 an 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;
// Obtain the province Node
Var province = xmlFile. getElementsByTagName ("province ");;
// Obtain the select tag
Var pselect = document. getElementById ("sheng ");
// Retrieve the saving information of the xml file cyclically
For (var I = 0; I <province. length; I ++ ){
Var shorter = province [I]. getAttribute ("name ");
Var provincename = province [I]. text;
// Cyclically Add the province information to the select statement
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> select </option>
</Select>
City: <select name = "city" id = "city">
</Select>
</Body>
</Html>
Servlet code:
Copy codeThe Code is 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 ();
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
