使用简单的Servlet响应前端请求,结合ajax实现省-市-县的三级联动(后台Service层和dao层代码省略)
前端页面展示:
<body>
<select id="provinceId" οnchange="provinceChange(this.value)">
<option value="default">--------请选择--------</option>
<c:forEach var="province" items="${provinces}">
<option value="${province.code }">${province.name}</option>
</c:forEach>
</select>
<select id="cityId" οnchange="cityChange(this.value)">
<option value="default">--------城市--------</option>
</select>
<select id="townId">
<option value="default">--------区县--------</option>
</select>
</body>
js代码:
<script type="text/javascript">
function provinceChange(code){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
eval('var cities=' + xhr.responseText);
//console.log(cities);
var list = document.getElementById("cityId");
while(list.hasChildNodes()){
list.removeChild(list.firstChild);
}
for(var i=0;i<cities.length;i++){
/* console.log(cities[i].name); */
var node = document.createElement("option");
var text = document.createTextNode(cities[i].name);
node.setAttribute("value", cities[i].code);
node.appendChild(text);
list.appendChild(node);
if(i==0){
node.setAttribute("selected", true);
}
}
cityChange(list.value);
}
};
var url = 'AddressServlet?' + 'type=province&code=' + code;
xhr.open("POST", url, true);
xhr.send(null);
}
function cityChange(code){
var xhr = new XMLHttpRequest();
//console.log('change');
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
eval('var towns=' + xhr.responseText);
//console.log(cities);
var list = document.getElementById("townId");
while(list.hasChildNodes()){
list.removeChild(list.firstChild);
}
for(var i=0;i<towns.length;i++){
/* console.log(cities[i].name); */
var node = document.createElement("option");
var text = document.createTextNode(towns[i].name);
node.setAttribute("value", towns[i].code);
node.appendChild(text);
list.appendChild(node);
}
}
};
var url = 'AddressServlet?' + 'type=city&code=' + code;
xhr.open("POST", url, true);
xhr.send(null);
}
</script>
Ajax向后台发送请求后获取到数据库中的相关信息,然后展示在前端页面中。
Servlet代码:
@SuppressWarnings("serial")
public class AddressServlet extends HttpServlet {
private AddressService addressService = new AddressServiceImpl();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
Gson gson = new Gson();
if (request.getParameter("type") == null) {
request.setAttribute("provinces", showProvinces());
request.getRequestDispatcher("menu.jsp").forward(request, response);
}
else if(request.getParameter("type").equals("province")){
response.setContentType("text/json;charset=utf-8");
if(request.getParameter("code").equals("default")) return;
int code = Integer.parseInt(request.getParameter("code"));
out.println(gson.toJson(showCities(code)));
//System.out.println(showCities(code));
out.flush();
out.close();
}
else if(request.getParameter("type").equals("city")){
response.setContentType("text/json;charset=utf-8");
if(request.getParameter("code").equals("default")) return;
int code = Integer.parseInt(request.getParameter("code"));
out.println(gson.toJson(showTowns(code)));
//System.out.println(showTowns(code));
out.flush();
out.close();
}
}
private List<Province> showProvinces() {
return addressService.getProvince();
}
private List<City> showCities(int code){
return addressService.getCity(code);
}
private List<Town> showTowns(int code){
return addressService.getTown(code);
}
}