如何實現省市區三級聯動的效果（從前臺頁面、後臺、資料庫詳細闡述）
阿新 • • 發佈：2019-01-10
package com.xiaojie.servlet; import java.io.IOException; import java.lang.reflect.Method; import java.sql.SQLException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.fasterxml.jackson.databind.ObjectMapper; import com.xiaojie.beans.City; import com.xiaojie.beans.County; import com.xiaojie.beans.Province; import com.xiaojie.dao.DAO; /** * Servlet implementation class ThreeactiondServlet */ @WebServlet("/threeactiondServlet") public class ThreeactiondServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String methodname=request.getParameter("method"); try { Method method=getClass().getDeclaredMethod(methodname,HttpServletRequest.class,HttpServletResponse.class); method.invoke(this, request,response);//呼叫各自的方法 } catch (Exception e) { e.printStackTrace(); } } private DAO dao=new DAO(); protected void province(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, ClassNotFoundException, SQLException { System.out.println("province的servlet進入了"); String sql="select province_id,province_name from province"; List<Province> provinces=dao.getprovince(sql); request.setAttribute("provinces", provinces); System.out.println(provinces); //注意：這裡不能用重定向的形式，因為我們好不容易在request請求域中儲存了省的資訊，目的是在前臺頁面中能夠從請求域中獲取到我們存在資料庫中的值 //故這裡只能用轉發的方式 request.getRequestDispatcher("/index2.jsp").forward(request, response); } protected void city(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, ClassNotFoundException, SQLException { System.out.println("city的servlet進入了"); String province_id=request.getParameter("province_id"); String sql="select city_id,city_name from city where province_id=?"; List<City> cities=dao.getcity(sql,Integer.parseInt(province_id)); ObjectMapper mapper=new ObjectMapper(); String result=mapper.writeValueAsString(cities); System.out.println(result); response.setContentType("text/javascript"); response.getWriter().print(result); } protected void county(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, ClassNotFoundException, SQLException { System.out.println("county的servlet進入了"); String city_id=request.getParameter("city_id"); String sql="select county_id,county_name from county where city_id=?"; List<County> counties=dao.getcounty(sql,Integer.parseInt(city_id)); ObjectMapper mapper=new ObjectMapper(); String result=mapper.writeValueAsString(counties); System.out.println(result); response.setContentType("text/javascript"); response.getWriter().print(result); } }
2.3前臺開發
首先通過重定向的方式到後臺獲取資料將省份的資訊顯示在前臺頁面，這裡建立一個index.jsp<%
response.sendRedirect("threeactiondServlet?method=province");
%><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>三級聯動</title> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ alert("jquery起作用了"); $("#province").change(function(){ //使#city只保留第一個option子節點 $("#city option:not(:first)").remove(); var province_id=$(this).val(); if(province_id!=""){ var url="<%=request.getContextPath()%>/threeactiondServlet?method=city"; var args={"province_id":province_id,"time":new Date()}; $.getJSON(url,args,function(data){ for(var i=0;i<data.length;i++){ var city_id=data[i].city_id; var city_name=data[i].city_name; $("#city").append("<option value='"+city_id+"'>"+city_name+"</option>"); } }); } }); $("#city").change(function(){ //使#county只保留第一個option子節點 $("#county option:not(:first)").remove(); var city_id=$(this).val(); if(city_id!=""){ var url="<%=request.getContextPath()%>/threeactiondServlet?method=county"; var args={"city_id":city_id,"time":new Date()}; $.getJSON(url,args,function(data){ for(var i=0;i<data.length;i++){ var county_id=data[i].county_id; var county_name=data[i].county_name; $("#county").append("<option value='"+county_id+"'>"+county_name+"</option>"); } }); } }); }); </script> </head> <body> <center> 省：<select id="province" > <option value="">請選擇...</option> <c:forEach items="${provinces }" var="province"> <option value="${ province.province_id}">${ province.province_name}</option> </c:forEach> </select> 市：<select id="city"> <option value="">請選擇...</option> </select> 縣：<select id="county"> <option value="">請選擇...</option> </select> </center> </body> </html>