Javaweb--json--ajax--mysql implementation of provincial three-level linkage (with three-level linkage database)

In the Web, achieving level three linkage is common, especially with Jquery+json. But, fundamentally, jquery is not the easiest to understand, and then starting with the most basic JavaScript, the Javascript+json+mysql achieves level three linkage:

First, the knowledge points involved: 1.ajax: (Asynchronous JavaScript and XML)

1. Simply, it is not necessary to refresh the entire page to achieve dynamic changes in the local page: that is, do not re-publish the project to change the data you want to change.

2. Four steps to implement async:

1. Get the Core object

2. Open the link

3. Send

4. Add a Listener

2.json: The Main method to use:

Jsonarray.fromobject (object); Convert list array to JSON

Jsonobject.fromobject (object); Convert JavaBean to JSON

ToString (); Get JSON string

3.javabean Database-based design (not a way to say the database and Java object-oriented understanding):

A one-to-many, many-to-one, pair-by-table design relationship, object-oriented is key: A province has more than one city, so the province bean can have a list of the city, but the city belongs to which province, should also design province object to remember the city

Case Demo:

Two, the core code:

The first is to display the JavaBean of the province asynchronously:

 Public classProvince {PrivateString Provinceid; PrivateString Province; PrivateList<city>CityList;  PublicString Getprovinceid () {returnProvinceid; }     Public voidSetprovinceid (String provinceid) { This. Provinceid =Provinceid; }     PublicString getprovince () {returnProvince; }     Public voidsetprovince (String province) { This. Province =Province; }     PublicList<city>getcitylist () {returnCityList; }     Public voidSetcitylist (list<city>citylist) {         This. CityList =CityList; }    }

Save Servlet:==================================json Conversion ==============================

 Public voiddoget (httpservletrequest request, httpservletresponse response)throwsservletexception, IOException {response.setcontenttype ("Text/html;charset=utf-8"); /** 1. Get all the Provinces of DAO * 2. Convert list<province> to JSON * 3. Send to Client*/Dao DAO=NewDao (); List<Province> plist=dao.getallprovince (); String JSON=Jsonarray.fromobject (plist). toString ();                Response.getwriter (). print (JSON); }

Asynchronous display Province: jsp========== This is just the Ajax implementation of the province's code, all the code in the Back: (Focus: How to achieve ajax+json cohesion)

<script type= "Text/javascript" >functioncreatexmlhttprequest () {Try {            return NewXMLHttpRequest ();//Most browsers}Catch(e) {Try {                return NewActiveXObject ("MSXML2. XMLHTTP ");//IE6}Catch(e) {Try {                    return NewActiveXObject ("Micorsoft.xmlhttp");//IE5 even earlier}Catch(e) {} }}}window.onload=function() {            /*One, send the asynchronous request, the page load completes, each province generates an option to add to, <select id= "province" > Under*/    //1. Get the Core object    varxmlhttp=createxmlhttprequest (); //2. Open the link       Xmlhttp.open ("GET", "<c:url value= '/servlet/provinceservlet '/>",true);//   To implement this, you must import the taglib tag body  //3. SendXmlhttp.send (NULL);//4. Add a listenerXmlhttp.onreadystatechange=function(){            if(Xmlhttp.readystate==4 && xmlhttp.status==200){                    varProarry = eval ("(" + Xmlhttp.responsetext + ")");//Execute JSON string--get array                    //iterating through an array                     for(vari = 0; i < proarry.length; i++) {                        varPro = Proarry[i];//get each Pro object                        varOptionele = document.createelement ("option");//Create <option> elements                        //assigns the actual value of option to Pro.provinceid (province ID) instead of pro.province (province name)Optionele.value =Pro.provinceid; varTextnode =document.createTextNode (pro.province);                        Optionele.appendchild (Textnode); //finally: Add the option element to the SELECT elementdocument.getElementById ("Province"). appendchild (Optionele);        }            }        }; };</script>

<!--body part design--
<Body>    <H1>Three-level linkage between provincial and urban areas</H1>${test} province:<Selectname= "Province"ID= "Province">     <option>= = = Please select = =</option> </Select>City:<Selectname= "City"ID= "City">     <option>= = = Please select = =</option> </Select>District (county):<Selectname= "area"ID= "area">     <option>= = = Please select = =</option> </Select>            </Body>

Third, the provincial city level three linkage database:

Https://files.cnblogs.com/files/wangsr-suc/Province_city_areas.zip

Iv. Complete code

Click to download

Javaweb--json--ajax--mysql implementation of provincial three-level linkage (with three-level linkage database)