Ajax地域选择demo
index.jsp只用于转发到Servlet获得省份数据再转发到province.jsp
index.jsp
<%@ page language="java" contentType="text/html; UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <base href="${pageContext.request.scheme }://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath}/"> <!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>Insert title here</title> </head> <body> <jsp:forward page="chinaServlet" > <jsp:param name="method" value="getProvinces"></jsp:param> </jsp:forward> </body> </html>
province.jsp
<%@ page language="java" contentType="text/html; UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <base href="${pageContext.request.scheme }://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath}/"> <!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"> <script type="text/javascript" src="script/jquery-1.7.2.min.js"></script> <title>Insert title here</title> <%response.setCharacterEncoding("UTF-8"); %> <script type="text/javascript"> $(function() { $("#province").change(function() { $("#city option:not(:first)").remove(); var url = "chinaServlet"; var provinceId = $(this).val(); //alert(provinceId); if(provinceId!=""){ var json = {"method":"getCitys","provinceId":provinceId}; $.post(url,json, function(data) { //alert(data[1].name); for(var i = 0;i<data.length;i++){ $("#city").append("<option value="+data[i].cityId+">"+data[i].name+"</option>") } },"json") } }); }) </script> </head> <body> <select id="province"> <option value="">请选择...</option> <c:forEach items="${requestScope.provinces }" var="provinces"> <option value="${provinces.provinceId}">${provinces.name}</option> </c:forEach> </select> <select id="city"> <option value="">请选择...</option> </select> </body> </html>
Servlet
package com.servlet; import java.io.IOException; import java.lang.reflect.InvocationTargetException; import java.lang.reflect.Method; 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.dao.CityDao; import com.dao.ProvinceDao; import com.dao.impl.CityDaoImpl; import com.dao.impl.ProvinceDaoImpl; import com.domain.City; import com.domain.Province; import com.google.gson.Gson; import com.sun.media.jfxmedia.events.NewFrameEvent; /** * Servlet implementation class ChinaServlet */ @WebServlet("/chinaServlet") public class ChinaServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public ChinaServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String methodName = request.getParameter("method"); System.out.println(methodName); try { Method method = getClass().getDeclaredMethod(methodName, HttpServletRequest.class,HttpServletResponse.class); method.invoke(this, request,response);//反射获得方法 } catch (NoSuchMethodException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (SecurityException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (IllegalAccessException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (IllegalArgumentException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (InvocationTargetException e) { // TODO Auto-generated catch block e.printStackTrace(); } } public void getProvinces(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //得到省份数据 ProvinceDao dao = new ProvinceDaoImpl(); List<Province> provinces = dao.queryForList(); System.out.println(provinces); request.setAttribute("provinces", provinces); request.getRequestDispatcher("/WEB-INF/pages/province.jsp").forward(request, response); } public void getCitys(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//等到城市数据 String provinceId = request.getParameter("provinceId"); System.out.println(provinceId); CityDao dao = new CityDaoImpl(); List<City> cities = dao.queryByProvinceId(provinceId); //System.out.println(cities); Gson gson = new Gson(); String json = gson.toJson(cities); //System.out.println(json); response.setCharacterEncoding("UTF-8"); response.setContentType("text/javascript"); response.getWriter().print(json); } }
Dao类方法不在这里贴了
源码下载 https://files.cnblogs.com/files/lusufei/AJAX%E5%9C%B0%E5%9F%9F%E9%80%89%E6%8B%A9demo.zip
