一、需求分析
先有一个省份的下拉选，根据选择省份，从而动态的市下拉选中加载所有的市。
步骤分析：
1、表（省表、市表）
2、页面上有两个下拉选（省份下拉选一般是固定的 页面加载的时候读取所有的省份）
3、当省份改变的时候，要获取省份的信息，发送ajax请求到市的表中查询响应省份的所有市，然后将他们加载到市的下拉选中
4、要有两个servlet，一个是省的servlet，一个是市的servlet
整体思路就是在页面上显示省市下拉选，然后使用jquery在改变的情况下发送ajax请求到后台进行查询，然后使用ajax的回调函数进行展示。
二、代码
前台代码：
<%@ 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">
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
//页面加载成功 查询所有的省
$.get("/day15/selectPro",function(d){
//alert(d)
var $pro=$("#proId");
$(d).each(function(){
$pro.append($("<option value="+this.provinceid+">"+this.name+"</option>"));
});
},"json");
//给省份下拉选派发change事件
$("#proId").change(function(){
//获取省份id
var $pid=$(this).val();
//alert($pid);
//发送ajax请求 查询所有的市
$.get("/day15/selectCity",{"pid":$pid},function(obj){
//alert(obj);
var $city=$("#cityId");
$city.html("<option>-请选择-</option>");
if(obj!=null){
$(obj).each(function(){
$city.append($("<option value='"+this.cityid+"'>"+this.name+"</option>"));
});
}
},"json");
});
})
</script>
<title>省市联动</title>
</head>
<body>
<select id="proId" name="province">
<option>-省份-</option>
<!--
<option value="1">北京</option>
-->
</select>
<select id="cityId" name="city">
<option>-请选择-</option>
</select>
</body>
</html>
SelectProServlet代码：
package com.itheima.web.servlet;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.itheima.domain.Province;
import com.itheima.service.ProvinceService;
import net.sf.json.JSONArray;
/**
* 查询所有的省
*/
public class SelectProServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.调用service 查询所有的省份
List<Province> list=null;
try {
list = new ProvinceService().findAll();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//2.将所有的省份写回去
response.setContentType("text/html;charset=utf-8");
if(list!=null && list.size()>0){
response.getWriter().println(JSONArray.fromObject(list));
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
SelectCityServlet代码：
package com.itheima.web.servlet;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.itheima.domain.City;
import com.itheima.service.CityService;
import net.sf.json.JSONArray;
/**
* 根据省份id查询所有的市
*/
public class SelectCityServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//0.设置编码
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//1.获取省份id
String pid=request.getParameter("pid");
//2.调用service 查询所有的市 返回 list
List<City> list=null;
try {
list = new CityService().findCitiesByPid(pid);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//3.将list转换成json 返回页面
if(list!=null && list.size()>0){
response.getWriter().println(JSONArray.fromObject(list));
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
网友评论