城市四级联动，js和jquery对ajax的支持结合html,json
Posted lingl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了城市四级联动，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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!--<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>-----请选择城市-----</option>");
$(‘#xian‘).html("<option>-----请选择县区-----</option>");
$(‘#xiang‘).html("<option>-----请选择乡镇-----</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>-----请选择县区-----</option>");
$(‘#xiang‘).html("<option>-----请选择乡镇-----</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>-----请选择乡镇-----</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>城市四级联动</b></p>
<select id="province" >
<option id="p1">==请选择省份==</option>
</select>
<select id="city" >
<option>==请选择城市==</option>
</select>
<select id="xian" >
<option>==请选择县区==</option>
</select>
<select id="xiang">
<option>==请选择乡镇==</option>
</select>
</body>
</html>
以上是关于城市四级联动，js和jquery对ajax的支持结合html,json的主要内容，如果未能解决你的问题，请参考以下文章