ajax 的json联动

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //text/html,  text/xml,   text/text  
            response.setContentType("text/html;charset=utf-8");
            Dao dao = new Dao();
            List<Provincename> province = dao.findAllProvince();
            String json = JSONArray.fromObject(province).toString();
            response.getWriter().print(json);  
    }

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        int pid = Integer.parseInt(request.getParameter("pid"));
        System.out.println("pid="+pid);
        Dao dao = new Dao();

        List<Cityname> cityList = dao.findByProvince(pid);

        String json = JSONArray.fromObject(cityList).toString();
        System.out.println(json);

        response.getWriter().print(json);
    }

<script type="text/javascript">
    function createXMLHttpRequest() {
        try {
            return new XMLHttpRequest();//大多数浏览器
        } catch (e) {
            try {
                return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
            } catch (e) {
                try {
                    return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本    
                } catch (e) {
                    alert("哥们儿，您用的是什么浏览器啊？");
                    throw e;
                }
            }
        }
    }

    window.onload = function() {
        var xmlHttp = createXMLHttpRequest();
        xmlHttp.open("GET", "<c:url value ='/ProvinceServlet'/>", true);
        xmlHttp.send(null);
        xmlHttp.onreadystatechange = function() {
    
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var proArray  = eval("("+ xmlHttp.responseText+")") ;
            for(var i = 1;i<proArray.length;i++){
                var pro = proArray[i];//pro是每一个省
                var optionEle = document.createElement("option");
                optionEle.value = pro.pid;
                var textNode = document.createTextNode(pro.name);
                optionEle.appendChild(textNode);
                document.getElementById("p").appendChild(optionEle);
            }
            
            }
        
    };

    var proSelect = document.getElementById("p");
    proSelect.onchange = function() {
    
        var xmlHttp = createXMLHttpRequest();
        xmlHttp.open("POST", "<c:url value = '/CityServlet'/>", true);
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    
        xmlHttp.send("pid=" + this.value);
        xmlHttp.onreadystatechange = function() {

            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var citySelect = document.getElementById("c");
                var optionEleList = citySelect.getElementsByTagName("option");
                while (optionEleList.length > 1) {
                    citySelect.removeChild(optionEleList[1]);
                }

                var cityArray = eval("("+xmlHttp.responseText+")");

                for(var i = 0;i<cityArray.length;i++){
                var city = cityArray[i];
                var optionEle = document.createElement("option");
                optionEle.value = city.cid;
                var textNode = document.createTextNode(city.name);
                optionEle.appendChild(textNode);
                citySelect.appendChild(optionEle);
                }
            }
            };
        };

    };
</script>


</head>
<body>
    <h1>省市联动</h1>
    <select name="province" id="p">
        <option>===请选择省===</option>
    </select>

    <select name="city" id="c">
        <option>===请选择市===</option>
    </select>
</body>

相关阅读:
互联网实习笔记之shell笔记
 互联网实习笔记之30天总结
 记被论文排版虐的一天
 大论文排版技巧
 Matlab2014a使用VS2015混合编译
 腾讯云服务器创建swap空间
 使用vs2015开发linux：Ubuntu程序
 使用VS2015远程GDB调试
 nullptr、NULL、null和0
《将博客搬至CSDN》
原文地址：https://www.cnblogs.com/xiaoxiao5ya/p/4933355.html