Jquery+Ajax+Servlet实现省市二级联动

不念不忘少年蓝@ 2022-02-24 03:36 290阅读 0赞

domain类

/**
     * @author maple
     * 
     * 省份
     */
    public class Province {
    	/**省份编号*/
    	private Long id;
    	/**省份名称*/
    	private String name;
    	
    	public Province(Long id, String name) {
    		super();
    		this.id = id;
    		this.name = name;
    	}
    	public Long getId() {
    		return id;
    	}
    	public void setId(Long id) {
    		this.id = id;
    	}
    	public String getName() {
    		return name;
    	}
    	public void setName(String name) {
    		this.name = name;
    	}
    	
    	//获取省份---是模拟，就不从数据库里读取了
    	public static List<Province> getAllProvince() {
    		List<Province> provinceList = Arrays.asList(new Province(1L,"四川省"),new Province(2L,"湖南省"),new Province(3L,"湖北省"));
    		return provinceList;
    	}
    }

/**
     * @author maple
     *城市
     */
    public class City {
    	/**城市编号*/
    	private Long id;
    	/**城市名称*/
    	private String name;
    	public City(Long id, String name) {
    		super();
    		this.id = id;
    		this.name = name;
    	}
    	public Long getId() {
    		return id;
    	}
    	public void setId(Long id) {
    		this.id = id;
    	}
    	public String getName() {
    		return name;
    	}
    	public void setName(String name) {
    		this.name = name;
    	}
    	
    	public static List<City> getCity(Long id) {
    		List<City> cityList = null;
    		if (id==1) {
    			cityList = Arrays.asList(new City(4L, "成都市"),new City(5L, "南充市"),new City(6L, "雅安市"),new City(7L, "自贡市"));
    		} else if (id==2) {
    			cityList = Arrays.asList(new City(8L, "长沙市"),new City(9L, "株洲市"),new City(10L, "湘潭市"));
    		} else if (id==3) {
    			cityList = Arrays.asList(new City(11L, "武汉市"),new City(12L, "黄冈市"),new City(13L, "襄阳市"));
    		}
    		
    		return cityList;
    	}
    }

![在这里插入图片描述][20190402224628758.png]

@WebServlet("/query")
    public class QueryServlet extends HttpServlet{
    	@Override
    	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    		//设置编码 post请求使用
    		req.setCharacterEncoding("UTF-8");
    		//设置响应的内容类型和编码
    		//resp.setContentType("text/html;charset=utf-8");
    		//使用以下代码，前台可以不用解析json，直接遍历
    		resp.setContentType("text/json;charset=utf-8");
    		//获取参数，传过来的是省份id
    		String id = req.getParameter("id");
    		if (id != null) {
    			List<City> cityList = City.getCity(Long.parseLong(id));
    			//将list转成json对象进行输出
    			JSON cityJson = JSONSerializer.toJSON(cityList);
    			resp.getWriter().print(cityJson);
    		} else {
    			List<Province> provinceList = Province.getAllProvince();
    			JSON provinceJson = JSONSerializer.toJSON(provinceList);
    			resp.getWriter().print(provinceJson);
    		}
    		
    	}
    }

前台html

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-2.1.3.js"></script>
    <script type="text/javascript">
    	$(function(){
    		$.get("/query",function(data){
    			//将数据转发成json对象
    			var provinceJson = JSON.parse(data);
    			//each遍历  index:索引  domEle:元素，是dom对象
    			$(provinceJson).each(function(index, domEle){
    				//追加选项
    				$("#provinceSelect").append("<option value='"+provinceJson[index].id+"'>"+provinceJson[index].name+"</option>");
    			});
    		});
    		
    		//onchange事件：一旦更改了选项就触发
    		$("#provinceSelect").on("change",function(){
    			//如果没有这句代码城市选项会进行累加，试着可以去掉这行代码看效果
    			$("#citySelect").html("<option>--请选择--</option>");
    			//$(this).val() 下拉列表选中的value
    			$.get("/query",{"id":$(this).val()},function(data){
    				var cityJson = JSON.parse(data);
    				$(cityJson).each(function(index, domEle){
    					$("#citySelect").append("<option value='"+cityJson[index].id+"'>"+cityJson[index].name+"</option>");
    			});
    				
    		},"json"); //如果在这里添加了"json"这个参数，前台不用再去解析了，直接遍历
    		});
    	});
    </script>
    </head>
    <body>
    	省份<select id="provinceSelect">
    		<option>--请选择--</option>
    	</select>
    	城市<select id="citySelect">
    		<option>--请选择--</option>
    	</select>
    </body>
    </html>

[20190402224628758.png]: /images/20220224/58c2e9994ff249dfa0f12aeed323e4cc.png