码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-04-12 00:23:08      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:tchar   .ajax   cut   ast   enter   sub   java   iter   try   

                                                                 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

标签:tchar   .ajax   cut   ast   enter   sub   java   iter   try   

原文地址:https://www.cnblogs.com/lingl/p/8799357.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!