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 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 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", "", 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", "", 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>

 

转载于:https://www.cnblogs.com/xiaoxiao5ya/p/4933355.html

你可能感兴趣的:(ajax 的json联动)