domain类
/**
* @author maple
*
* 省份
*/
public class Province {
/**省份编号*/
private Long id;
/**省份名称*/
private String name;
public Province(Long id, String name) {
super();
this.id = id;
this.name = name;
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
//获取省份---是模拟,就不从数据库里读取了
public static List<Province> getAllProvince() {
List<Province> provinceList = Arrays.asList(new Province(1L,"四川省"),new Province(2L,"湖南省"),new Province(3L,"湖北省"));
return provinceList;
}
}
/**
* @author maple
*城市
*/
public class City {
/**城市编号*/
private Long id;
/**城市名称*/
private String name;
public City(Long id, String name) {
super();
this.id = id;
this.name = name;
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public static List<City> getCity(Long id) {
List<City> cityList = null;
if (id==1) {
cityList = Arrays.asList(new City(4L, "成都市"),new City(5L, "南充市"),new City(6L, "雅安市"),new City(7L, "自贡市"));
} else if (id==2) {
cityList = Arrays.asList(new City(8L, "长沙市"),new City(9L, "株洲市"),new City(10L, "湘潭市"));
} else if (id==3) {
cityList = Arrays.asList(new City(11L, "武汉市"),new City(12L, "黄冈市"),new City(13L, "襄阳市"));
}
return cityList;
}
}
@WebServlet("/query")
public class QueryServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置编码 post请求使用
req.setCharacterEncoding("UTF-8");
//设置响应的内容类型和编码
//resp.setContentType("text/html;charset=utf-8");
//使用以下代码,前台可以不用解析json,直接遍历
resp.setContentType("text/json;charset=utf-8");
//获取参数,传过来的是省份id
String id = req.getParameter("id");
if (id != null) {
List<City> cityList = City.getCity(Long.parseLong(id));
//将list转成json对象进行输出
JSON cityJson = JSONSerializer.toJSON(cityList);
resp.getWriter().print(cityJson);
} else {
List<Province> provinceList = Province.getAllProvince();
JSON provinceJson = JSONSerializer.toJSON(provinceList);
resp.getWriter().print(provinceJson);
}
}
}
前台html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.3.js"></script>
<script type="text/javascript">
$(function(){
$.get("/query",function(data){
//将数据转发成json对象
var provinceJson = JSON.parse(data);
//each遍历 index:索引 domEle:元素,是dom对象
$(provinceJson).each(function(index, domEle){
//追加选项
$("#provinceSelect").append("<option value='"+provinceJson[index].id+"'>"+provinceJson[index].name+"</option>");
});
});
//onchange事件:一旦更改了选项就触发
$("#provinceSelect").on("change",function(){
//如果没有这句代码城市选项会进行累加,试着可以去掉这行代码看效果
$("#citySelect").html("<option>--请选择--</option>");
//$(this).val() 下拉列表选中的value
$.get("/query",{"id":$(this).val()},function(data){
var cityJson = JSON.parse(data);
$(cityJson).each(function(index, domEle){
$("#citySelect").append("<option value='"+cityJson[index].id+"'>"+cityJson[index].name+"</option>");
});
},"json"); //如果在这里添加了"json"这个参数,前台不用再去解析了,直接遍历
});
});
</script>
</head>
<body>
省份<select id="provinceSelect">
<option>--请选择--</option>
</select>
城市<select id="citySelect">
<option>--请选择--</option>
</select>
</body>
</html>