package com.bj.controller; import com.bj.entity.Area; import com.bj.service.AreaService; import com.bj.service.impl.AreaServiceImpl; import com.google.gson.Gson; 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 java.io.IOException; import java.io.PrintWriter; import java.util.List; @WebServlet("/areaServlet") public class AreaServlet extends HttpServlet{ //首先肯定要 初始化 这个类 private AreaService as = new AreaServiceImpl(); @Override充实 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { Integer parentid=Integer.parseInt(req.getParameter("parentid")); List<Area> areas = as.findAreaByParentid(parentid); Gson gson=new Gson(); String areaStr = gson.toJson(areas); resp.setCharacterEncoding("UTF-8"); resp.setContentType("text/html;charset=UTF-8"); PrintWriter writer = resp.getWriter(); writer.print(areaStr); } }
<%-- Created by IntelliJ IDEA. User: x1c Date: 2019-12-22 Time: 12:09 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> <script src="jquery-1.12.3.min.js"></script> <script> function showData(val,tagid){ //使用ajax进行异步请求 $.ajax({ type:"GET", url:"areaServlet", data:{parentid:val}, dataType:'JSON', success:function(areas){ //上一个标签每次换了选择 后面都的清空 $(tagid).html(" <option>-请选择-</option>") for(var i in areas){ $(tagid).append('<option value="'+areas[i].areaid+'">'+areas[i].areaname+'</option>') } //必须加上这个 要不然不能达到 省份改变 县城刷新 if(tagid=="#city"){ $("#qu").html("<option>-请选择区-</option>") } } }) } //页面加载函数 $(function(){ //传的第一个参数为0 就可以吧省会都查出来 传入 Provience标签 showData(0,'#provience') }) </script> </head> <body> 籍贯： <select id="provience" onchange="showData(this.value,'#city')"> <option>-请选择-</option> </select> <select id="city" onchange="showData(this.value,'#qu')"> <option>-请选择-</option> </select> <select id="qu"> <option>-请选择区-</option> </select> </body> </html>