Ajax實現簡單三級聯動
阿新 • • 發佈：2019-01-01
使用簡單的Servlet響應前端請求，結合ajax實現省-市-縣的三級聯動（後臺Service層和dao層程式碼省略）
前端頁面展示：
<body> <select id="provinceId" onchange="provinceChange(this.value)"> <option value="default">--------請選擇--------</option> <c:forEach var="province" items="${provinces}"> <option value="${province.code }">${province.name}</option> </c:forEach> </select> <select id="cityId" onchange="cityChange(this.value)"> <option value="default">--------城市--------</option> </select> <select id="townId"> <option value="default">--------區縣--------</option> </select> </body>
js程式碼：
<script type="text/javascript"> function provinceChange(code){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ eval('var cities=' + xhr.responseText); //console.log(cities); var list = document.getElementById("cityId"); while(list.hasChildNodes()){ list.removeChild(list.firstChild); } for(var i=0;i<cities.length;i++){ /* console.log(cities[i].name); */ var node = document.createElement("option"); var text = document.createTextNode(cities[i].name); node.setAttribute("value", cities[i].code); node.appendChild(text); list.appendChild(node); if(i==0){ node.setAttribute("selected", true); } } cityChange(list.value); } }; var url = 'AddressServlet?' + 'type=province&code=' + code; xhr.open("POST", url, true); xhr.send(null); } function cityChange(code){ var xhr = new XMLHttpRequest(); //console.log('change'); xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ eval('var towns=' + xhr.responseText); //console.log(cities); var list = document.getElementById("townId"); while(list.hasChildNodes()){ list.removeChild(list.firstChild); } for(var i=0;i<towns.length;i++){ /* console.log(cities[i].name); */ var node = document.createElement("option"); var text = document.createTextNode(towns[i].name); node.setAttribute("value", towns[i].code); node.appendChild(text); list.appendChild(node); } } }; var url = 'AddressServlet?' + 'type=city&code=' + code; xhr.open("POST", url, true); xhr.send(null); } </script>
Ajax向後臺傳送請求後獲取到資料庫中的相關資訊，然後展示在前端頁面中。
Servlet程式碼：
@SuppressWarnings("serial") public class AddressServlet extends HttpServlet { private AddressService addressService = new AddressServiceImpl(); public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); Gson gson = new Gson(); if (request.getParameter("type") == null) { request.setAttribute("provinces", showProvinces()); request.getRequestDispatcher("menu.jsp").forward(request, response); } else if(request.getParameter("type").equals("province")){ response.setContentType("text/json;charset=utf-8"); if(request.getParameter("code").equals("default")) return; int code = Integer.parseInt(request.getParameter("code")); out.println(gson.toJson(showCities(code))); //System.out.println(showCities(code)); out.flush(); out.close(); } else if(request.getParameter("type").equals("city")){ response.setContentType("text/json;charset=utf-8"); if(request.getParameter("code").equals("default")) return; int code = Integer.parseInt(request.getParameter("code")); out.println(gson.toJson(showTowns(code))); //System.out.println(showTowns(code)); out.flush(); out.close(); } } private List<Province> showProvinces() { return addressService.getProvince(); } private List<City> showCities(int code){ return addressService.getCity(code); } private List<Town> showTowns(int code){ return addressService.getTown(code); } }