City level four linkage, JS and jquery support for Ajax combined Html,json

JDBC Tool class

public class Jdbcutils {

public static Basicdatasource Bs=null;

static{
Properties P = new properties ();
try {
P.load (JdbcUtils.class.getClassLoader (). getResourceAsStream ("properties/mysqlconfig.properties"));
bs= new Basicdatasource ();
Bs.setusername (P.getproperty ("username"));
Bs.setpassword (P.getproperty ("password"));
Bs.seturl (p.getproperty ("url"));
Bs.setdriverclassname (P.getproperty ("ClassName"));
Bs.setmaxactive (Integer.parseint (P.getproperty ("maxactive"));
Bs.setinitialsize (Integer.parseint (P.getproperty ("initsize"));
Bs.setmaxwait (Long.parselong (P.getproperty ("maxwait"));
} catch (Exception e) {
E.printstacktrace ();
System.out.println ("File failed to load");
}

}

public static DataSource Getdatasource () {

return BS;

}


}

Database configuration file:

Username=root
password=123456
Maxactive=5
Url=jdbc:mysql:///city
Classname=com.mysql.jdbc.driver
maxwait=5000
Initsize=3

Entity class

public class Os_district {
private int id;
private String name;
private int level;
private int upid;
Public Os_district () {
Super ();
TODO auto-generated Constructor stub
}
public os_district (int ID, String name, int. level, int upid) {
Super ();
This.id = ID;
THIS.name = name;
This.level = level;
This.upid = Upid;
}
public int getId () {
return ID;
}
public void setId (int id) {
This.id = ID;
}
Public String GetName () {
return name;
}
public void SetName (String name) {
THIS.name = name;
}
public int Getlevel () {
return level;
}
public void SetLevel (Int. level) {
This.level = level;
}
public int getupid () {
return upid;
}
public void setupid (int upid) {
This.upid = Upid;
}
@Override
public int hashcode () {
final int prime = 31;
int result = 1;
result = Prime * result + ID;
result = Prime * result + level;
result = Prime * result + ((name = = null)? 0:name.hashcode ());
result = Prime * result + upid;
return result;
}
@Override
public boolean equals (Object obj) {
if (this = = obj)
return true;
if (obj = = null)
return false;
if (GetClass ()! = Obj.getclass ())
return false;
Os_district other = (os_district) obj;
if (id! = other.id)
return false;
if (level! = Other.level)
return false;
if (name = = null) {
if (other.name! = null)
return false;
} else if (!name.equals (other.name))
return false;
if (upid! = other.upid)
return false;
return true;
}
@Override
Public String toString () {
Return "Os_district [id=" + ID + ", name=" + name + ", level=" + level
+ ", upid=" + Upid + "]";
}

}

Servlet

public class Doservlet extends HttpServlet {

public void Service (HttpServletRequest request, httpservletresponse response)
Throws Servletexception, IOException {
Request.setcharacterencoding ("Utf-8");
Response.setcontenttype ("Text/html;charset=utf-8");
String path = Request.getrequesturi ();
Path = path.substring (Path.lastindexof ("/"), Path.lastindexof ("."));
Citydaoimpl City = new Citydaoimpl ();
PrintWriter out = Response.getwriter ();
if ("/province". Equals (path)) {
try {
Jsonarray jsonprocince = Jsonarray.fromobject (city
. Findallprovince ());
Out.println (jsonprocince);

} catch (Exception e) {
E.printstacktrace ();
}
}

if ("/city". Equals (path)) {
int id = integer.parseint (request.getparameter ("id"));
try {
Jsonarray jsoncity = Jsonarray.fromobject (City.findallbyid (id));
Out.println (jsoncity);
} catch (Exception e) {
E.printstacktrace ();
}
}

if ("/xian". Equals (path)) {
int id = integer.parseint (request.getparameter ("id"));
try {
Jsonarray Jsonxian = Jsonarray.fromobject (City.findallbyid (id));
Out.println (Jsonxian);
} catch (Exception e) {
E.printstacktrace ();
}
}

if ("/xiang". Equals (path)) {
int id = integer.parseint (request.getparameter ("id"));
try {
Jsonarray Jsonxiang = Jsonarray
. Fromobject (City.findallbyid (id));
Out.println (Jsonxiang);
} catch (Exception e) {
E.printstacktrace ();
}
}

}

}

city.html

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>insert title here</title>
<!--<script type= "Text/javascript" src= "Js/my.js" ></script>-->
<script type= "Text/javascript" src= "Js/jquery-3.3.1.min.js" ></script>
<script type= "Text/javascript" >
/* Function province () {
var xhr = getxhr ();
alert (XHR);
$ (' province '). Innerhtml= ';
Xhr.open (' Get ', ' province.do ', true);
Xhr.onreadystatechange=function () {
if (xhr.readystate==4&&xhr.status==200) {
var Text=xhr.responsetext;
var jsontext = json.parse (text);
for (Var i=0;i<jsontext.length;i++) {
var option = document.createelement ("option");
alert (jsontext[i].name);
Option.text=jsontext[i].name;
Option.text=jsontext[i].name;
Option.value=jsontext[i].id;
alert (jsontext[i].name);
$ ("province"). Options.add (option);
}
}
};
Xhr.send (NULL);

}
function Provincechange (ID) {

Alert (code);
var xhr = getxhr ();
alert (XHR);
$ (' city '). Innerhtml= ';
$ (' Xian '). Innerhtml= ';
$ (' Xiang '). innerhtml= ';
Xhr.open (' Get ', ' city.do?id= ' +id,true);
Xhr.onreadystatechange=function () {
if (xhr.readystate==4&&xhr.status==200) {
var Text=xhr.responsetext;
var jsontext = json.parse (text);
for (Var i=0;i<jsontext.length;i++) {
var option = document.createelement ("option");

Option.text=jsontext[i].name;
Option.value=jsontext[i].id;
alert (jsontext[i].name);
$ ("City"). Options.add (option);
}
}
};
Xhr.send (NULL);

}

function Citychange (ID) {

alert (Citycode);
var xhr = getxhr ();
alert (XHR);
$ (' Xian '). Innerhtml= ';
$ (' Xiang '). innerhtml= ';
Xhr.open (' Get ', ' xian.do?id= ' +id,true);
Xhr.onreadystatechange=function () {
if (xhr.readystate==4&&xhr.status==200) {
var Text=xhr.responsetext;
alert (text);
var jsontext = json.parse (text);
alert (Jsontext);
for (Var i=0;i<jsontext.length;i++) {
var option = document.createelement ("option");
Option.text=jsontext[i].name;
Option.value=jsontext[i].id;
alert (jsontext[i].name);
$ ("Xian"). Options.add (option);
}
}
};
Xhr.send (NULL);

}

function Xianchange (ID) {

alert (Citycode);
var xhr = getxhr ();
alert (XHR);
$ (' Xiang '). innerhtml= ';
Xhr.open (' Get ', ' xiang.do?id= ' +id,true);
Xhr.onreadystatechange=function () {
if (xhr.readystate==4&&xhr.status==200) {
var Text=xhr.responsetext;
alert (text);
var jsontext = json.parse (text);
alert (Jsontext);
for (Var i=0;i<jsontext.length;i++) {
var option = document.createelement ("option");
Option.text=jsontext[i].name;
Option.value=jsontext[i].id;
alert (jsontext[i].name);
$ ("Xiang"). Options.add (option);
}
}
};
Xhr.send (NULL);

} */

$ (function () {

$.ajax ({
' URL ': ' Province.do? ',
' type ': ' Get ',
' DataType ': ' JSON ',
' Success ': function (data) {

for (Var i=0;i<data.length;i++) {
$ (' #province '). Append ("<option value=" +data[i].id+ ">" +data[i].name+ "</option>");
}
},
' Async ': false
})

$ (' #province '). Change (function () {
$ (' #city '). HTML ("<option>-----Please select City-----</option>");
$ (' #xian '). HTML ("<option>-----Please select County-----</option>");
$ (' #xiang '). HTML ("<option>-----Please select township-----</option>");
var $obj = $ (this). Val ();
Alert ($obj)
$.ajax ({
' URL ': ' City.do ',
' Data ': {' id ': $obj},
' DataType ': ' JSON ',
' Success ': function (data) {
for (Var i=0;i<data.length;i++) {
$ (' #city '). Append ("<option value=" +data[i].id+ ">" +data[i].name+ "</option>");
}
}
})
})

$ (' #city '). Change (function () {

$ (' #xian '). HTML ("<option>-----Please select County-----</option>");
$ (' #xiang '). HTML ("<option>-----Please select township-----</option>");
var $obj = $ (this). Val ();
Alert ($obj)
$.ajax ({
' URL ': ' Xian.do ',
' Data ': {' id ': $obj},
' DataType ': ' JSON ',
' Success ': function (data) {
for (Var i=0;i<data.length;i++) {
$ (' #xian '). Append ("<option value=" +data[i].id+ ">" +data[i].name+ "</option>");
}
}
})
})


$ (' #xian '). Change (function () {

$ (' #xiang '). HTML ("<option>-----Please select township-----</option>");
var $obj = $ (this). Val ();
Alert ($obj)
$.ajax ({
' URL ': ' Xiang.do ',
' Data ': {' id ': $obj},
' DataType ': ' JSON ',
' Success ': function (data) {
for (Var i=0;i<data.length;i++) {
$ (' #xiang '). Append ("<option value=" +data[i].id+ ">" +data[i].name+ "</option>");
}
}
})
})


})



</script>
<body align= ' center ' style= ' top:200px ' >
<p><b> City level four linkage </b></p>
<select id= "Province" >
<option id= "P1" >== please select Province ==</option>
</select>
<select id= "City" >
<option>== Please select City ==</option>
</select>
<select id= "Xian" >
<option>== Please select County District ==</option>
</select>
<select id= "Xiang" >
<option>== Please select Township ==</option>
</select>
</body>

City level four linkage, JS and jquery support for Ajax combined Html,json