html城市四级选择,城市四级联动，js和jquery对ajax的支持结合html,json

jdbc工具类

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("文件加载失败");

}

}

public static DataSource getDataSource(){

return bs;

}

}

数据库配置文件：

username=root

password=123456

MaxActive=5

url=jdbc:mysql:///city

className=com.mysql.jdbc.Driver

maxWait=5000

initSize=3

实体类

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

Insert title here

/* 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

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

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

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

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

$(‘#province‘).append(""+data[i].name+"");

}

},

‘async‘:false

})

$(‘#province‘).change(function(){

$(‘#city‘).html("-----请选择城市-----");

$(‘#xian‘).html("-----请选择县区-----");

$(‘#xiang‘).html("-----请选择乡镇-----");

var $obj = $(this).val();

//alert($obj)

$.ajax({

‘url‘:‘City.do‘,

‘data‘:{‘id‘:$obj},

‘dataType‘:‘json‘,

‘success‘:function(data){

for(var i=0;i

$(‘#city‘).append(""+data[i].name+"");

}

}

})

})

$(‘#city‘).change(function(){

$(‘#xian‘).html("-----请选择县区-----");

$(‘#xiang‘).html("-----请选择乡镇-----");

var $obj = $(this).val();

//alert($obj)

$.ajax({

‘url‘:‘Xian.do‘,

‘data‘:{‘id‘:$obj},

‘dataType‘:‘json‘,

‘success‘:function(data){

for(var i=0;i

$(‘#xian‘).append(""+data[i].name+"");

}

}

})

})

$(‘#xian‘).change(function(){

$(‘#xiang‘).html("-----请选择乡镇-----");

var $obj = $(this).val();

//alert($obj)

$.ajax({

‘url‘:‘Xiang.do‘,

‘data‘:{‘id‘:$obj},

‘dataType‘:‘json‘,

‘success‘:function(data){

for(var i=0;i

$(‘#xiang‘).append(""+data[i].name+"");

}

}

})

})

})

城市四级联动

==请选择省份==

==请选择城市==

==请选择县区==

==请选择乡镇==