Ajax achieves provincial/municipal level-2 Linkage

This is a servlet application ..

The first is the Web. xml file.

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <web-app version = "2.5" xmlns = "http://java.sun.com/xml/ns/javaee" <br/> xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance" <br/> xsi: schemalocation = "http://java.sun.com/xml/ns/javaee <br/> http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <br/> <servlet-Name> provincecityservlet </servlet-Name> <br/> <Servlet -Class> COM. jadyer. ajax. provincecityservlet </servlet-class> <br/> </servlet> <br/> <servlet-mapping> <br/> <servlet-Name> provincecityservlet </servlet-Name> <br/> <URL-pattern>/servlet/provincecityservlet </url-pattern> <br/> </servlet-mapping> <br/> <welcome-file-List> <br/> <welcome-File> index. JSP </welcome-File> <br/> </welcome-file-List> <br/> </Web-app>

Then the index. jsp page that displays the second-level linkage effect

<% @ Page Language = "Java" pageencoding = "UTF-8" %> </P> <p> <SCRIPT type = "text/JavaScript"> <br/> var XMLHTTP = new XMLHttpRequest (); // supports Internet Explorer-8.0.6001.18702 </P> <p> function getcitys (provinceid) {<br/> // if the province option is selected, select province = to clear the city list data, and the "= select city =" text = "<br/> If ('0' = provinceid) {<br/> paiitys (); <br/> return; <br/>}< br/> XMLHTTP. open ('get', '$ {pagecontext. request. contextpath}/servlet/provincecityse Rvlet? Provinceid = '+ provinceid, true); <br/> XMLHTTP. onreadystatechange = callback; // sets the callback function <br/> XMLHTTP. setRequestHeader ("If-modified-since", "0"); // you can disable browser caching. <br/> XMLHTTP. send (null); // send the request <br/>}</P> <p> function callback () {<br/> If (4 = XMLHTTP. readystate & 200 = XMLHTTP. status) {<br/> var citystrings = XMLHTTP. responsetext; // get the returned results (Suihua, Jixi, Harbin, Jiamusi) <br/> var citys = citystrings. split (","); // The city String Array obtained by splitting </P> <p> comment itys (); <br/> var city = document. getelementbyid ("city"); </P> <p> for (VAR I = 0; I <Citys. length; I ++) {<br/> var option = document. createelement ("option"); <br/> option. TEXT = citys [I]; <br/> option. value = I; </P> <p> // use city. appendchild (option); is valid in firefox3.6.13, while ie8.0.6001.18702 is blank <br/> city. options [I + 1] = option; // so Dom is not used for the moment, both Firefox and IE <br/>}</P> <p> // clears city list data <br/> function compute itys () {<br/> var city = document. getelementbyid ('city'); <br/> city. options. length = 0; <br/> city. options [0] = New Option ('= select city =', '0 '); <br/>}< br/> </SCRIPT> </P> <p> Province: <br/> <select id = "Province" onchange = "getcitys (this. value) "> <br/> <% -- here, the onchange event can also be written as onchange =" getcitys (this. options [this. selectedindex]. value) "-- %> <br/> <option value =" 0 ">== select a province ==</option> <br/> <option value =" 1 "> Heilongjiang </option> <br/> <option value = "2"> Jilin Province </option> <br/> <option value = "3"> Liaoning Province </option> <br /> </SELECT> <br/> city: <br/> <select id = "city"> <br/> <option >== select city ==</option> <br/> </SELECT>

Finally, provincecityservlet. java used to handle Ajax request operations

Package COM. jadyer. ajax; </P> <p> Import Java. io. ioexception; <br/> Import Java. io. printwriter; <br/> Import Java. util. arraylist; <br/> Import Java. util. hashmap; <br/> Import Java. util. list; <br/> Import Java. util. map; </P> <p> Import javax. servlet. servletexception; <br/> Import javax. servlet. HTTP. httpservlet; <br/> Import javax. servlet. HTTP. httpservletrequest; <br/> Import javax. servlet. HTTP. httpservletresponse; </P> <p>/** <br/> * the database is not connected here, and all data is constructed by yourself <br/> * @ see in actual application, obtain Dynamic data from the database <br/> */<br/> @ suppresswarnings ("serial ") <br/> public class provincecityservlet extends httpservlet {<br/> Public static Map <string, list <string> map = new hashmap <string, list <string> (); </P> <p> @ override <br/> Public void Init () throws servletexception {<br/> List <string> List = new arraylist <string> (); <br/> list. add ("Suihua "); <Br/> list. add ("Jixi"); <br/> list. add ("Harbin"); <br/> list. add ("Jiamusi"); <br/> map. put ("1", list); // Heilongjiang <br/> List = new arraylist <string> (); <br/> list. add ("Changchun"); <br/> list. add ("graphic"); <br/> list. add ("Yanji"); <br/> list. add ("Siping"); <br/> map. put ("2", list); // Jilin Province <br/> List = new arraylist <string> (); <br/> list. add ("Dalian"); <br/> list. add ("Shenyang"); <br/> list. add ("Tieling"); <br/> list. add ("Benxi"); <br/> map. put ("3", list); // Liaoning <Br/>}</P> <p> protected void doget (httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {<br/> string provinceid = request. getparameter ("provinceid"); <br/> List <string> List = map. get (provinceid); // obtain the list of cities based on the province id </P> <p> stringbuffer sb = new stringbuffer (); <br/> If (null! = List) {<br/> for (string S: List) {<br/> Sb. append (s ). append (","); <br/>}< br/> // The City of the province constructed here, which is a string similar to [Suihua, Jixi, harbin, Jiamusi,] <br/> // note that a comma will be appended at the end, so we need to delete the last comma <br/> If (! List. isempty () {<br/> Sb. deletecharat (sb. length ()-1); <br/>}</P> <p> response. setcontenttype ("text/html; charset = UTF-8"); // set the response category <br/> printwriter out = response. getwriter (); <br/> out. print (sb. tostring (); <br/> out. close (); <br/>}< br/>}