Ajax achieves infinite provincial/municipal Linkage

This is a servlet application ..

The JSON-lib toolkit is used here. For how to use JSON-lib, see my blog

Http://blog.csdn.net/jadyer/archive/2011/02/01/6171659.aspx

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> initprovinceservlet </servlet-Name> <br/> <Servlet -Class> COM. jadyer. servlet. initprovinceservlet </servlet-class> <br/> </Serv Let> <br/> <servlet-Name> getcityservlet </servlet-Name> <br/> <servlet-class> COM. jadyer. servlet. getcityservlet </servlet-class> <br/> </servlet> <br/> <servlet-Name> getareaservlet </servlet-Name> <br /> <servlet-class> COM. jadyer. servlet. getareaservlet </servlet-class> <br/> </servlet> </P> <p> <servlet-mapping> <br/> <servlet-Name> initprovinceservlet </Servlet -Name> <br/> <URL-Pattern >/Servlet/initprovinceservlet </url-pattern> <br/> </servlet-mapping> <br/> <servlet-Name> getcityservlet </servlet-Name> <br/> <URL-pattern>/servlet/getcityservlet </url-pattern> <br/> </servlet-mapping> <br/> <servlet-mapping> <br/> <servlet-Name> getareaservlet </servlet-Name> <br/> <URL-pattern>/servlet/getareaservlet </url-pattern> <br/> </servlet-mapping> </P> <p> <! -In version = "2.5, you can directly execute the servlet application in <welcome-file-List> <br/> <welcome-File> Servlet/initprovinceservlet </welcome-File> <br/> </welcome-file-List> <br/> </Web-app>

Then the index. jsp page is used to display the infinite provincial/municipal linkage results.

<% @ Page Language = "Java" pageencoding = "UTF-8" %> <br/> <% @ taglib prefix = "C" uri = "http://java.sun.com/jsp/jstl/core" %> </P> <p> <SCRIPT type = "text/JavaScript"> <br/> var XMLHTTP = new XMLHttpRequest (); // supports Internet Explorer-8.0.6001.18702 </P> <p> var thetagid; // defines global variables, <br/> function getcitylist (provinceid, tagid) {<br/> var isdelete = false; <br/> thetagid = tagid; <br/> var Sons = document. gete Lementbyid (tagid ). childnodes; <br/> for (VAR I = (sons. length-1); I >=0; I --) {<br/> If (""! = Sons [I]. nodename. touppercase () {<br/> // If ("Ul" = sons [I]. nodename. touppercase () {// The two are equivalent <br/> sons [I]. parentnode. removechild (sons [I]); <br/> isdelete = true; <br/>}< br/> If (isdelete) {<br/> return; <br/>}< br/> XMLHTTP. open ('get', '$ {pagecontext. request. contextpath}/servlet/getcityservlet? Provinceid = '+ provinceid, true); <br/> XMLHTTP. onreadystatechange = callbackcitylist; <br/> XMLHTTP. setRequestHeader ("If-modified-since", "0"); <br/> XMLHTTP. send (null); <br/> return false; <br/>}</P> <p> function callbackcitylist () {<br/> If (4 = XMLHTTP. readystate & 200 = XMLHTTP. status) {<br/> var citys = eval (XMLHTTP. responsetext); <br/> If (0 = Citys. length) {<br/> return; <br/>}< br/> var parentli = document. getelementbyid (thetagid); <br/> var newul = document. createelement ("Ul"); </P> <p> for (VAR I = 0; I <Citys. length; I ++) {<br/> var newli = document. createelement ("Li"); <br/> newli. id = "tag" + citys [I]. cityid; <br/> newli. innerhtml = "<a href = '# 'onclick = 'getcitylist (" + citys [I]. cityid + ",/" tag "+ citys [I]. cityid + "/"); '> "+ citys [I]. cityname + "</a>"; <br/> newul. appendchild (newli); <br/>}< br/> parentli. appendchild (newul); <br/>}< br/> </SCRIPT> </P> <p> <ul> <br/> <C: foreach items = "$ {requestscope. provinces} "Var =" Province "> <br/> <li id =" tag $ {province. cityid} "> <a href =" # "onclick =" Return getcitylist ($ {province. cityid}, 'tag $ {province. cityid} '); ">$ {province. cityname }</A> </LI> <br/> </C: foreach> <br/> </ul>

Then, citydao. Java is used to perform query operations from the database.

Package COM. jadyer. dao; </P> <p> Import Java. SQL. connection; <br/> Import Java. SQL. preparedstatement; <br/> Import Java. SQL. resultset; <br/> Import Java. SQL. sqlexception; <br/> Import Java. util. arraylist; <br/> Import Java. util. list; </P> <p> Import javax. naming. context; <br/> Import javax. naming. initialcontext; <br/> Import javax. naming. namingexception; <br/> Import javax. SQL. datasource; </P> <p> Import COM. jadyer. Model. city; </P> <p>/** <br/> * The code here should be reconstructed, but for convenience of demonstration, no reconstruction <br/> */<br/> public class citydao {<br/>/** <br/> * obtain all primary classes based on the parent id <br/> * @ see if 0 is passed, all the root nodes <br/> */<br/> public list <city> findbyparentid (INT parentid) {<br/> string SQL = "select cityid, cityname from city where parentid =? "; <Br/> List <city> citys = new arraylist <city> (); <br/> try {<br/> context = new initialcontext (); <br/> // For JDBC/oracleds connection pool configuration, see http://blog.csdn.net/jadyer/archive/2010/11/10/6001023.aspx <br/> datasource DS = (datasource) context. lookup ("Java:/COMP/ENV/jdbc/oracleds"); <br/> connection conn = Ds. getconnection (); <br/> preparedstatement pstmt = Conn. preparestatement (SQL); <br/> pstmt. setint (1, Parentid); <br/> resultset rs = pstmt.exe cutequery (); <br/> while (RS. next () {<br/> Citys. add (New City (RS. getint ("cityid"), RS. getstring ("cityname"); <br/>}< br/>} catch (namingexception e) {<br/> E. printstacktrace (); <br/>} catch (sqlexception e) {<br/> E. printstacktrace (); <br/>}< br/> return citys; <br/>}</P> <p>/** <br/> * obtain detailed information about the city based on the ID. <br/> */<br/> Public City fingbycityid (INT cityid) {<br/> St Ring SQL = "select cityname from city where cityid =? "; <Br/> city City = NULL; <br/> try {<br/> context = new initialcontext (); <br/> datasource DS = (datasource) context. lookup ("Java:/COMP/ENV/jdbc/oracleds"); <br/> connection conn = Ds. getconnection (); <br/> preparedstatement pstmt = Conn. preparestatement (SQL); <br/> pstmt. setint (1, cityid); <br/> resultset rs = pstmt.exe cutequery (); <br/> while (RS. next () {<br/> city = New City (cityid, Rs. getstring ("cityname"); <br/>}< br/>} catch (namingexception e) {<br/> E. printstacktrace (); <br/>} catch (sqlexception e) {<br/> E. printstacktrace (); <br/>}< br/> return city; <br/>}< br/>}

Entity class used to store city information

Package COM. jadyer. model; </P> <p> Import Java. util. list; </P> <p> public class city {<br/> private integer parentid; <br/> private integer cityid; <br/> private string cityname; <br/> private list <city> areas; // stores the detailed information of all districts and counties in the city </P> <p>/* getter and setter methods for the four attributes */</P> <p> Public City () {}</P> <p> Public City (integer cityid, string cityname) {<br/> This. cityid = cityid; <br/> This. cityname = cityname; <br/>}< br/>}

Initprovinceservlet. java used to initialize information of all provinces

Package COM. jadyer. servlet; </P> <p> Import Java. io. ioexception; </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> Import COM. jadyer. dao. citydao; </P> <p> @ suppresswarnings ("serial") <br/> public class initprovinceservlet extends httpservlet {<br/> Public void doget (httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {<br/> citydao = new citydao (); <br/> // obtain information of all provinces <br/> request. setattribute ("provinces", citydao. findbyparentid (0); <br/> request. getrequestdispatcher ("/index. JSP "). forward (request, response); <br/>}< br/>}

Getcityservlet. java used to obtain information about all cities in a specified Province

Package COM. jadyer. servlet; </P> <p> Import Java. io. ioexception; <br/> Import Java. util. list; </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> Import net. SF. JSON. jsonarray; </P> <p> Import COM. jadyer. dao. citydao; <br/> Import COM. jadyer. model. city; </P> <p> @ suppresswarnings ("serial") <br/> public class getcityservlet extends httpservlet {<br/> Public void doget (httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {<br/> response. setcontenttype ("text/html; charset = UTF-8"); <br/> int provinceid = integer. parseint (request. getparameter ("provinceid"); <br/> citydao = new citydao (); <br/> // return information of all cities in the province. <br/> List <city> citys = citydao. findbyparentid (provinceid); <br/> jsonarray jsonobject = jsonarray. fromobject (citys); <br/> response. getwriter (). println (jsonobject. tostring (); <br/>}< br/>}

Getareaservlet. Java

Package COM. jadyer. servlet; </P> <p> Import Java. io. ioexception; <br/> Import Java. util. list; </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> Import net. SF. JSON. jsonobject; </P> <p> Import COM. jadyer. dao. citydao; <br/> Import COM. jadyer. model. city; </P> <p> @ suppresswarnings ("serial") <br/> public class getareaservlet extends httpservlet {<br/> Public void doget (httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {<br/> response. setcontenttype ("text/html; charset = UTF-8"); <br/> int cityid = integer. parseint (request. getparameter ("cityid"); <br/> citydao = new citydao (); <br/> // obtain a set of detailed information about all districts and counties in the city. <br/> List <city> areas = citydao. findbyparentid (cityid); <br/> // obtain the details of the current city. <br/> city city22 = citydao. fingbycityid (cityid); <br/> city22.setareas (areas); <br/> jsonobject = jsonobject. fromobject (city22); <br/> response. getwriter (). println (jsonobject. tostring (); <br/>}< br/>}

Finally, the database script file

-- Oracle 11g <br/> -- create a table <br/> Create Table City (<br/> ID number (3) primary key, <br/> parentid number (3), -- 0 indicates the root node <br/> cityid number (3), <br/> cityname varchar (20) <br/>) </P> <p> -- create a sequence <br/> Create sequence city_sequence increment by 1 start with 1 nomaxvalue nocycle; </P> <p> -- add Level 1 menu <br/> insert into city values (city_sequence.nextval, 0, 1, 'heilongjiang '); <br/> insert into city values (city_sequence.nextval, 0, 2, 'Jilin province '); <br/> insert into city values (city_sequence.nextval, 0, 3, 'liaoning province '); <br/> -- add Level 2 menu <br/> insert into city values (city_sequence.nextval, 1, 4, 'harbin '); <br/> insert into city values (city_sequence.nextval, 1, 5, 'jiamusi '); <br/> insert into city values (city_sequence.nextval, 1, 6, 'dual yashan'); <br/> insert into city values (city_sequence.nextval, 2, 7, 'changchun '); <br/> insert into city values (city_sequence.ne Xtval, 2, 8, 'liaoyuan'); <br/> insert into city values (city_sequence.nextval, 2, 9, 'tonghua '); <br/> insert into city values (city_sequence.nextval, 3, 10, 'shenyang '); <br/> insert into city values (city_sequence.nextval, 3, 11, 'dalian '); <br/> insert into city values (city_sequence.nextval, 3, 12, 'tieling '); <br/> -- add a three-level menu <br/> -- only the three-level linkage data of Heilongjiang Province is provided. For data about other provinces, add <br/> insert into city values (city_sequence.nextval, 4, 13, 'bayan County '); <br/> insert into city values (city_sequence.nextval, 4, 14, 'yanshou County'); <br/> insert into city values (city_sequence.nextval, 4, 15, 'mulan City'); <br/> insert into city values (city_sequence.nextval, 5, 16, 'suwon ay'); <br/> insert into city values (city_sequence.nextval, 5, 17, 'tangyuan County '); <br/> insert into city values (city_sequence.nextval, 5, 18, 'huachuan County'); <br/> insert into city values (city_sequence.nextval, 6, 19,' Ji xianxian '); <br/> insert into city values (city_sequence.nextval, 6, 20, 'bao qingxian'); <br/> insert into city values (city_sequence.nextval, 6, 21, 'youyouxian '); <br/> -- add Level 4 menu <br/> -- only the level 4 linkage data of Harbin is provided, and other data is provided, add <br/> insert into city values (city_sequence.nextval, 13, 22, 'xing longzhen ') by yourself; <br/> insert into city values (city_sequence.nextval, 13, 23, 'longmiao Zhen '); <br/> insert into city values (city_sequence.nextval, 13, 24, 'suxing Zhen'); <br/> Insert into city values (city_sequence.nextval, 14, 25, 'liutuzhen '); <br/> insert into city values (city_sequence.nextval, 14, 26, 'zhonghe town '); <br/> insert into city values (city_sequence.nextval, 14, 27, 'trust town '); <br/> insert into city values (city_sequence.nextval, 15, 28, 'Dong Xing Zhen '); <br/> insert into city values (city_sequence.nextval, 15, 29, 'Grand town '); <br/> insert into city values (city_sequence.nextval, 15, 30, 'new min Zhen' ); <Br/> -- add a menu of five levels <br/> -- only five levels of association data in Bayan County are provided, and other data are provided, add <br/> insert into city values (city_sequence.nextval, 22, 31, 'changchun township '); <br/> insert into city values (city_sequence.nextval, 22, 32, 'fenglexiang '); <br/> insert into city values (city_sequence.nextval, 22, 33, 'dianxiang township'); <br/> insert into city values (city_sequence.nextval, 23, 34, 'mountain output'); <br/> insert into city values (city_sequence.nextval, 23, 35, 'huashan output'); <br/> INS ERT into city values (city_sequence.nextval, 23, 36, 'hongguang township '); <br/> insert into city values (city_sequence.nextval, 24, 36, 'Dongxiang town '); <br/> insert into city values (city_sequence.nextval, 24, 36, 'fu Jiangxiang '); <br/> insert into city values (city_sequence.nextval, 24, 36, 'songhuaxiangxiang '); <br/> -- add level 6 menu <br/> -- theoretically unlimited. However, in practice, there are not many levels of menus used, so the following data is omitted: