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

最新推荐文章于 2023-07-09 18:52:27 发布

璞砆

最新推荐文章于 2023-07-09 18:52:27 发布

阅读量638

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42136250/article/details/88983508

版权

前端专栏收录该内容

2 篇文章 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;
	}
}

在这里插入图片描述

@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>

璞砆

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Jquery+Ajax+Servlet实现省市二级联动

domain类 /** * @author maple * * 省份 */public class Province { /**省份编号*/ private Long id; /**省份名称*/ private String name; public Province(Long id, String name) { super(); this.id = id;...
复制链接

扫一扫

专栏目录