三級聯動
阿新 • • 發佈:2017-05-27
請求 protected exception gson ces get chan jsp res
四、dao和bean略
效果圖:
一、list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>list_tzq</title> <script type="text/javascript" src="../js/jquery-1.7.2.js"></script> <script type="text/javascript" src="list.js"></script> </head> <body> <select id="province" name="province"> <option value="">請選擇省</option> </select> <select id="city" name="city"> <option value="">請選擇市</option> </select> <select id="county" name="county"> <option value="">請選擇縣</option> </select> </body> </html>
二、list.js
$(function(){ $provinceSelect=$("#province"); $citySelect=$("#city"); $countySelect=$("#county"); //顯示第一級 $.post("../ProvinceServlet",function(jsonArray){ showProvinces(jsonArray); },"json"); //顯示第二級。給第一級的下拉選項加入單擊響應事件 $provinceSelect.change(function(){ //每次請求都須要將city下拉列表清空。不然會累加 //刪除city的下拉<option>, 但第一個除外 $citySelect.find("option:not(:first)").remove(); //刪除county的下拉<option>, 但第一個除外 $countySelect.find("option:not(:first)").remove(); var pid=this.value; if(pid=="") return ; $.post("../CityServlet",{pid:pid},function(jsonArray){ showCitys(jsonArray); },"json"); }); //顯示第三級,給第二級的下拉選項加入單擊響應事件 $citySelect.change(function(){ var cid=this.value; $.post("../CountyServlet",{cid:cid},function(jsonArray){ showCountys(jsonArray); },"json"); }); //顯示省份 function showProvinces(jsonArray){ $.each(jsonArray,function(){ var pid=this.pid; var pname=this.pname; $provinceSelect.append(‘<option value="‘+pid+‘">‘+pname+‘</option>‘); }); } //顯示市 function showCitys(jsonArray){ $.each(jsonArray,function(){ var cid=this.cid; var cname=this.cname; $citySelect.append(‘<option value="‘+cid+‘">‘+cname+‘</option>‘); }); } //顯示縣 function showCountys(jsonArray){ $.each(jsonArray,function(){ var tid=this.tid; var tname=this.tname; $countySelect.append(‘<option value="‘+tid+‘">‘+tname+‘</option>‘); }); } });
public class ProvinceServlet extends HttpServlet { private static final long serialVersionUID = 1L; private ProvinceDao dao=new ProvinceDao(); protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List<Province> list = dao.getAll(); String json=new Gson().toJson(list); System.out.println(json); response.setContentType("text/json;charset=utf-8"); response.getWriter().write(json); } }
public class CityServlet extends HttpServlet { private static final long serialVersionUID = 1L; private CityDao cityDao=new CityDao(); protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String pid = request.getParameter("pid"); List<City> list = cityDao.getListByPid(pid); String json=new Gson().toJson(list); System.out.println(json); response.setContentType("text/json;charset=utf-8"); response.getWriter().write(json); } }
public class CountyServlet extends HttpServlet { private static final long serialVersionUID = 1L; private CountyDao countyDao=new CountyDao(); protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("11111111"); String cid = request.getParameter("cid"); System.out.println(cid); List<County> list = countyDao.getListByCid(cid); String json=new Gson().toJson(list); System.out.println(json); response.setContentType("text/json;charset=utf-8"); response.getWriter().write(json); } }
四、dao和bean略
三級聯動