22.二级联动案例(HTML版本)
2018-06-12 本文已影响0人
若愚同学
Controller
@Controller
@RequestMapping("html")
public class LinkageHTMLController {
/*
* <option value="-1">--请选择--</option>
*/
//获取省份
@RequestMapping("province")
public void getProvince(HttpServletResponse response) throws Exception {
response.setContentType("text/html;charset=utf-8");
//获取到所有的省份
StringBuilder sb = new StringBuilder(100);
List<Province> list = Province.getAllProvince();
for (Province province : list) {
sb.append("<option value='").append(province.getId()).append("'>").append(province.getName())
.append("</option>");
}
response.getWriter().write(sb.toString());
}
//获取城市
@RequestMapping("city")
public void getCity(Long pId, HttpServletResponse response) throws Exception {
response.setContentType("text/html;charset=utf-8");
//获取到所有的省份
StringBuilder sb = new StringBuilder(100);
List<City> list = City.getCityByProvinceId(pId);
for (City City : list) {
sb.append("<option value='").append(City.getId()).append("'>").append(City.getName()).append("</option>");
}
response.getWriter().write(sb.toString());
}
}
HTML
<body>
<select id="provinces">
<option value="-1">--请选择--</option>
</select>
<select id="cities">
<option value="-1">--请选择--</option>
</select>
</body>
JS
window.onload = function() {
//获取到省份的选择器
var province = document.getElementById("provinces");
console.log(province);
//发送省份的请求
//创建ajax对象
var ajax = new XMLHttpRequest();
//open
ajax.open("get","/html/province.do",true);
//监听
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
province.innerHTML += ajax.responseText;
}
};
ajax.send();
province.onchange = function() {
var city = document.getElementById("cities");
var opHTML = "<option value='-1'>--请选择--</option>";
//优化,如果省选的是请选择,就没必要发送请求了
if (province.value < 0) {
city.innerHTML = opHTML;
return;
}
ajax.open("get","/html/city.do?pId="+this.value,true);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
city.innerHTML = opHTML+ajax.responseText;
}
};
ajax.send();
};
};
