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>