javaweb基础----省市县三级联动(javascript版)

说明:项目中需要用到json的工具包:flexjson-2.1.jar,这个工具包用于将后端数据库返回的list集合转换为字符串

<script type="text/javascript">
            function getXHR() {
                //定义一个变量，用来接收ajax核心引擎对象
                var xmlhttp;
                //判断当前浏览器
                if(window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //将ajax核心引擎对象，返回给调用者
                return xmlhttp;
            }
            window.onload = function() {
                var xhr = getXHR();
                //打开链接
                xhr.open("POST", "${root }/loadProvinceServlet", true);
                // 使用表单的方式 POST 数据
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                //发送数据
                xhr.send("pid=0");
                xhr.onreadystatechange = function() {
                    if(xhr.readyState == 4 && xhr.status == 200) {
                        var data = xhr.responseText;
                        //解析后台返回的数据
                        var arr = eval('('+data+')');
                        //获取省份的下拉框
                        var province = document.getElementById("province");
                        //遍历数组，将数组中所有的省份信息添加到下拉框中
                        for (i in arr) {
                            var p = arr[i];
                            var opt = document.createElement("option");
                            opt.setAttribute("value",p.id);
                            opt.innerHTML = p.name;
                            province.appendChild(opt);
                        }
                    }
                }

            }
            function loadCity(pid) {
                // 清空市下拉框中的所有选项
                // 获取省份的下拉框
                var city = document.getElementById("city");
                city.options.length = 1;
                // 清空县下拉框中的值
                var district = document.getElementById("district");
                district.options.length = 1;
                // 需要对选择的值进行有效验证
                if (!pid) return;
                
                // 1. 获取XMLHttpRequest对象
                var xmlhttp = getXHR();
                // 2. 监听服务器返回状态
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        // 获取后台返回的结果
                        var data = xmlhttp.responseText;
                        // 根据结果进行相应的处理
                        
                        // 后台返回所有的省份信息，json格式："[{id:1,name:"江苏"},{id:2,name:"上海"}]"
                        //var arr = JSON.parse(result); // 不推荐使用！
                        var arr = eval('(' + data + ')');
                        // 遍历数组，将数组中的所有的省份添加到下拉框中
                        for (i in arr) {
                            var p = arr[i];
                            var opt = document.createElement("option");
                            // <option value="1">江苏</option>
                            opt.setAttribute("value", p.id);
                            opt.innerHTML = p.name;
                            // 将创建好的option对象添加到下拉框中
                            city.appendChild(opt);
                        }
                    }
                }
                // 3. 打开连接
                xmlhttp.open("POST", "${root }/loadProvinceServlet", true);
                // 使用表单的方式 POST 数据
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                // 4. 发送请求
                xmlhttp.send("pid=" + pid);
            }
            function loadDist(pid) {
                // 获取县的下拉框，清空其中的值
                var district = document.getElementById("district");
                //district.length = 1;// 不推荐
                district.options.length = 1; // 推荐！！！
                
                // 需要对选择的值进行有效验证
                if (!pid) return;
                // 1. 获取XMLHttpRequest对象
                var xmlhttp = getXHR();
                // 2. 监听服务器返回状态
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        // 获取后台返回的结果
                        var data = xmlhttp.responseText;
                        // 根据结果进行相应的处理
                        
                        // 后台返回所有的省份信息，json格式："[{id:1,name:"江苏"},{id:2,name:"上海"}]"
                        //var arr = JSON.parse(result); // 不推荐使用！
                        var arr = eval('(' + data + ')');
                        // 遍历数组，将数组中的所有的县添加到下拉框中
                        for (i in arr) {
                            var p = arr[i];
                            var opt = document.createElement("option");
                            // <option value="1">江苏</option>
                            opt.setAttribute("value", p.id);
                            opt.innerHTML = p.name;
                            // 将创建好的option对象添加到下拉框中
                            district.appendChild(opt);
                        }
                    }
                }
                // 3. 打开连接
                xmlhttp.open("POST", "${root }/loadProvinceServlet", true);
                // 使用表单的方式 POST 数据
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                // 4. 发送请求
                xmlhttp.send("pid=" + pid);
            }

        </script>

 

后端servlet代码:

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取请求参数,根据pid查询所有子集区域
        int pid = Integer.parseInt(request.getParameter("pid"));
        //2.调用service方法查询数据
        ProvinceService ps = new ProvinceServiceImpl();
        List<PCD> areaList = ps.load(pid);
        //使用flexjson解析返回集合
        JSONSerializer serializer =new JSONSerializer();
        serializer = serializer.exclude("calss","pid");//移除不需要的字段
        String data = serializer.serialize(areaList);
//        serializer.deepSerialize(areaList);//可以深度解析javabean中的list map集合
        //3.页面响应给前端展示
        response.getWriter().write(data);
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

 

数据库字段: