java静态省市联动的前后端代码
时间: 2023-09-08 07:14:19 浏览: 54
前端代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<select id="province">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<script>
$(function() {
$.get("province.json", function(data) {
for (var i = 0; i < data.length; i++) {
var option = "<option value='" + data[i].code + "'>" + data[i].name + "</option>";
$("#province").append(option);
}
});
$("#province").change(function() {
var code = $(this).val();
$.get("city.json", {code: code}, function(data) {
$("#city").empty();
for (var i = 0; i < data.length; i++) {
var option = "<option value='" + data[i].code + "'>" + data[i].name + "</option>";
$("#city").append(option);
}
});
});
});
</script>
</body>
</html>
```
后端代码(Java Servlet):
```
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
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.alibaba.fastjson.JSON;
@WebServlet("/city")
public class CityServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String code = request.getParameter("code");
List<City> cityList = getCityList(code);
String json = JSON.toJSONString(cityList);
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(json);
out.flush();
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
private List<City> getCityList(String code) {
List<City> cityList = new ArrayList<City>();
if ("110000".equals(code)) {
cityList.add(new City("110100", "北京市"));
} else if ("120000".equals(code)) {
cityList.add(new City("120100", "天津市"));
} else if ("130000".equals(code)) {
cityList.add(new City("130100", "石家庄市"));
cityList.add(new City("130200", "唐山市"));
cityList.add(new City("130300", "秦皇岛市"));
cityList.add(new City("130400", "邯郸市"));
cityList.add(new City("130500", "邢台市"));
cityList.add(new City("130600", "保定市"));
cityList.add(new City("130700", "张家口市"));
cityList.add(new City("130800", "承德市"));
cityList.add(new City("130900", "沧州市"));
cityList.add(new City("131000", "廊坊市"));
cityList.add(new City("131100", "衡水市"));
} else if ("140000".equals(code)) {
cityList.add(new City("140100", "太原市"));
cityList.add(new City("140200", "大同市"));
cityList.add(new City("140300", "阳泉市"));
cityList.add(new City("140400", "长治市"));
cityList.add(new City("140500", "晋城市"));
cityList.add(new City("140600", "朔州市"));
cityList.add(new City("140700", "晋中市"));
cityList.add(new City("140800", "运城市"));
cityList.add(new City("140900", "忻州市"));
cityList.add(new City("141000", "临汾市"));
cityList.add(new City("141100", "吕梁市"));
}
return cityList;
}
}
```
说明:
1. 前端页面使用了jQuery库,需要在页面中引用。
2. 前端页面中使用了两个下拉框,一个用于选择省份,一个用于选择城市。
3. 前端页面中通过Ajax请求获取省份和城市的数据,省份数据使用的是静态的JSON文件,城市数据使用的是Java Servlet返回的JSON格式数据。
4. 后端使用Java Servlet返回城市数据,根据前端传入的省份编码来确定返回哪些城市数据。
5. 城市数据使用了自定义的City类,包含城市编码和城市名称两个字段。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)