1、dao：提供两个方法，
一个是查询所有省
通过省名称查询指定的市
2、servlet：两个方法
一个把所有省转换成json，发送给客户端
通过获取省名称这个参数，然后查询该省下的所有市，转换成json，发送给客户端
3、ajax5.jsp
页面加载完成后：访问servlet，得到所有省，然后显示在<select id ="province">
页面加载完成后：给<select id="province">添加onchange事件监听，获取选择的省名称，访问servlet，得到所有市，显示在<select id="city">中
一行记录对应多个对象时，需要使用Map来生成多个对象
my.domain.Province
public class Province {
private int pid;
private String name;
private List<City> cityList;//一方关联多方my.domain.City
public class City {
private int cid;
private String name;
private Province province;//多方关联一方my.dao
public class Dao {
private QueryRunner qr = new TxQueryRunner();
/**
* 查询所有省
* @return
*/
public List<Province> findAllProvince(){
try {
String sql = "select * from t_province";
return qr.query(sql, new BeanListHandler<Province>(Province.class));
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
/**
* 查询指定省下的所有市
*/
public List<City> findByProvince(int pid){
try{
String sql ="select * from t_city where pid=?";
return qr.query(sql, new BeanListHandler<City>(City.class),pid);
// List<Map<String,Object>> mapList = qr.query(sql, new MapListHandler(),pid);
// Map<String,Object> map = mapList.get(0);
// City city = CommonUtils.toBean(map, City.class);//把map转换成city对象
// Province province = CommonUtils.toBean(map, Province.class);//
// System.out.println(province);
// System.out.println(city);
// return qr.query(sql, new BeanListHandler<City>(City.class),pid);
// city.setProvince(province);
} catch(SQLException e){
throw new RuntimeException(e);
}
}
public static void main(String[] args) {
// Dao dao = new Dao();
// dao.findByProvince(1);
}
}public class ProvinceServlet2 extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
/*
* 1、通过dao得到所有的省
* 2、把List<Province>转换成json
* 3、发送给客户端
*/
Dao dao = new Dao();
List<Province> proList = dao.findAllProvince();
String json = JSONArray.fromObject(proList).toString();
response.getWriter().print(json);
}
}public class CityServlet2 extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");//发送xml时这里要修改
/*
* 1、获取名为pid的参数
* 2、使用这个省id查询数据库，得到List<City>
* 3、转发成json，转发给客户端
*/
int pid = Integer.parseInt(request.getParameter("pid"));
Dao dao = new Dao();
List<City> cityList = dao.findByProvince(pid);
String json = JSONArray.fromObject(cityList).toString();
response.getWriter().print(json);
}
}ajax5.jsp
<script type="text/javascript">
/*
* 1、在文档加载完成后
获取所有省，添加到<select id="province">中
给<select id="province">这个元素添加onchange事件
事件内容
1、获取当前选择的省id
2、使用省id访问servlet，得到该省下所有市
3、把每个市添加到<select id="city">中
*/
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return new ActiveXObject("Msxm12.XMLHTTP");
} catch(e){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
window.onload = function(){
/*
发送异步请求，得到所有省，然后使用每个省生成一个<option>元素添加到<select id ="province">中
*/
//得到核心对象
var xmlHttp = createXMLHttpRequest();
//打开连接 在浏览器客户端执行，执行时已经改变
xmlHttp.open("GET","<c:url value='/ProvinceServlet2'/>",true);
//发送
xmlHttp.send(null);
//添加监听
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 ){
if(xmlHttp.status ==200){
//执行服务器发送过来的json字符串，得到js的对象
var proArray = eval（"("+xmlHttp.responseText+")");
for(var i =0; i<proArray.length;i++){
var pro = proArray[i];//得到每个pro对象
//创建<option>元素
var optionEle = document.createElement("option");
//给<option>元素的value属性赋值
optionEle.value = pro.pid;//给<option>的实际值赋为pid,而不是name
var textNode = document.createTextNode(pro.name);//使用省名称来创建textNode
optionEle.appendChild(textNode);//把textNode添加到option元素中
//把option元素添加到select元素中
document.getElementById("province").appendChild(optionEle);
}
}
}
};
/*
2、给<select id="province">添加change监听
*/
document.getElementById("province").onchange = function(){
/*
异步请求服务器，得到选择的省下城市
*/
var xmlHttp = createXMLHttpRequest();
//打开连接 在浏览器客户端执行，执行时已经改变
xmlHttp.open("POST","<c:url value='/CityServlet2'/>",true);
//设置请求头
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送
xmlHttp.send("pid="+this.value);//用户选择的省
//添加监听
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 ){
if(xmlHttp.status ==200){
/*
0、先要清空原来的<option>元素
1、得到服务器发送过来的所有市
2、使用每个市生成<option>元素添加到<select id="city">中
*/
/*
清空<select id="city">中的选项
*/
var citySelect = document.getElementById("city");
//获取select中的所有元素
var cityOptionArray = citySelect.getElementsByTagName("option");
while(cityOptionArray.length>1){//这里只控制循环的次数
citySelect.removeChild(cityOptionArray[1]);//只删除1下标，不会删除0
}
/*
得到服务器发送过来的所有市
*/
var cityArray = eval（"("+xmlHttp.responseText+")");
//循环变量每个city对象，用来生成<option>元素添加到<select id="city">中
for(var i=0; i<cityArray.length;i++){
var city = cityArray[i];//得到每个city对象
//创建<option>元素
var optionEle = document.createElement("option");
//给<option>元素的value属性赋值
optionEle.value = city.pid;//给<option>的实际值赋为pid,而不是name
var textNode = document.createTextNode(city.name);//使用城市名称来创建textNode
optionEle.appendChild(textNode);//把textNode添加到option元素中
//把option元素添加到select元素中
citySelect.appendChild(optionEle);
}
}
}
}
}
}
</script>
</head>
<body>
<select name="province" id="province">
<option>选择省份</option>
</select>
<select name="city" id="city">
<option>选择城市</option>
</select>
</body>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
