22.二级联动案例(HTML版本)

Controller

@Controller
@RequestMapping("html")
public class LinkageHTMLController {
    /*
     * --请选择--
     */
    //获取省份
    @RequestMapping("province")
    public void getProvince(HttpServletResponse response) throws Exception {
        response.setContentType("text/html;charset=utf-8");
        //获取到所有的省份
        StringBuilder sb = new StringBuilder(100);
        List list = Province.getAllProvince();
        for (Province province : list) {
            sb.append("").append(province.getName())
                    .append("");
        }
        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 list = City.getCityByProvinceId(pId);
        for (City City : list) {
            sb.append("").append(City.getName()).append("");
        }
        response.getWriter().write(sb.toString());
    }
}

HTML

    
        --请选择--
    
    
    
        --请选择--
    

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 = "--请选择--";
        
        //优化,如果省选的是请选择,就没必要发送请求了
        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();
    };
};