JSP页面使用JSON和ajax实现省市联动

最新推荐文章于 2024-06-12 11:42:01 发布

Mr.Yanis

最新推荐文章于 2024-06-12 11:42:01 发布

阅读量3.4k

点赞数 1

分类专栏： JSP JavaScript与jQuery 文章标签： json ajax servlet jsp jquery

本文链接：https://blog.csdn.net/pyy542718473/article/details/70310022

版权

JSP 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

JavaScript与jQuery

6 篇文章 0 订阅

订阅专栏

jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>
<script src="js/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		$.getJSON("ProvinceSer", {
			pid : $("#province").val()
		}, function(data) {
			for ( var i = 0; i < data.province.length; i++) {
				$("#province").append(
						"<option value="+
		    			data.province[i].provinceId+">"
								+ data.province[i].province + "</option>");
			}
		})
	})
	function sel() {
		document.getElementById("city").options.length = 0;
		$.getJSON("CitySer", {
			cid : $("#province").val()
		}, function(data) {
			for ( var i = 0; i < data.city.length; i++) {
				$("#city").append(
						"<option value="+
		    			data.city[i].cityid+">"
								+ data.city[i].city + "</option>");
			}
		})
	}
</script>
</head>
<body>
	<select id=province name="province" οnchange="sel()">
		<option value="000000">请选择省份</option>
	</select>
	<select id=city>
		<option value="000000">请选择城市</option>
	</select>
</body>
</html>

provideSer.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		List<Province>list = new ProvinceBizImpl().getProvinces();
		response.setContentType("text/html;charset=utf-8");
		JSONArray ja = JSONArray.fromObject(list);
		JSONObject jo = new JSONObject();
		jo.put("province", ja);
		response.getWriter().write(jo.toString());
	}

CitySer.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String str = request.getParameter("cid");
		List<City>cities = new CityBizImpl().getCities(str);
		response.setContentType("text/html;charset=utf-8");
		JSONArray ja1 = JSONArray.fromObject(cities);
		JSONObject jo1 = new JSONObject();
		jo1.put("city", ja1);
		response.getWriter().write(jo1.toString());
	}

效果截图：

Mr.Yanis

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JSP页面使用JSON和ajax实现省市联动

jsp页面：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>Insert title here $(function() { $.getJSON("ProvinceSer", { pid : $("#province").val() },
复制链接

扫一扫