需求：选择确定的省份以后，这个省的对应城市会自动提示到城市下拉框中 引用的是 xml的处理方法
初始页面：
数据库中的数据：
初始页面的代码：（引用的是 xml的处理方法）
<%@ 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 type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!-- 引用的是 xml的处理方法 -->
<script type="text/javascript" src="js/city.js"></script>
</head>
<body>
省份: <select name="province" id ="province">
<option value="" >-请选择 -
<option value="1" >安徽
<option value="2" >江苏
<option value="3" >浙江
</select>
城市:
<select name="city" id="city">
<option value="" >-请选择 -
</select>
</body>
</html>先建立Dao层接口：
package com.lishan.dao;
import java.sql.SQLException;
import java.util.List;
import com.lishan.util.CityBean;
public interface CityDao {
/**
* 根据省的pid找到省下面对应的城市名字
* @param pid
* @return
* @throws SQLException
*/
List<CityBean> findCity(Integer pid)throws SQLException;
}再建立Dao层实现：
package com.lishan.dao.impl;
import java.sql.SQLException;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import com.lishan.dao.CityDao;
import com.lishan.util.CityBean;
import com.mchange.v2.c3p0.ComboPooledDataSource;
public class CityDaoImpl implements CityDao {
public List<CityBean> findCity(Integer pid) throws SQLException {
ComboPooledDataSource dataSource = new ComboPooledDataSource();
QueryRunner queryRunner = new QueryRunner(dataSource);
String sql ="select * from A wnere pid = ?";
queryRunner.query(sql, new BeanListHandler<CityBean>(CityBean.class),pid);
return null;
}
}这里逻辑简单，就不再用service层，，直接到servlet:
引用的是 xml的处理方法
使用XStream 将bean对象转为xml 需要两个JAR包
Servlet层代码：（显然这个方法是比较麻烦的，但是也可以做出来效果） 一些需要的说明都在代码中，这里不再赘述
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//1. 获取参数
int pid = Integer.parseInt(request.getParameter("pid"));
//2 找出所有的城市
CityDao dao = new CityDaoImpl();
List<CityBean> list = dao.findCity(pid);
//3. 返回数据。手动拼 ---> XStream 转化 bean对象成 xml
XStream xStream = new XStream();
//想把id做成属性
//xStream.useAttributeFor(CityBean.class, "id");
//设置别名
xStream.alias("city", CityBean.class);
//转化一个对象成xml字符串
String xml = xStream.toXML(list);
//返回数据
response.setContentType("text/xml;charset=utf-8");
response.getWriter().write(xml);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
};
}JS相关代码：一些需要的说明都在代码中，这里不再赘述
$(function() {
//1。找到省份的元素
$("#province").change(function() {
//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
//$("#province").varl();
var pid = $(this).val();
/*<list>
<city>
<id>1<id>
<pid>1</pid>
<cname>深圳</cname>
</city>
<city >
<id>2<id>
<pid>1</pid>
<cname>东莞</cname>
</city>
</list>*/
$.post( "CityServlet",{pid:pid} ,function(data,status){
//alert("回来数据了:"+data);
//先清空以前的值：
$("#city").html("<option value='' >-请选择-")
//遍历：
//从data数据里面找出所有的city ， 然后遍历所有的city。
//遍历一个city，就执行一次function方法
$(data).find("city").each(function() {
//遍历出来的每一个city，取它的孩子。 id , cname
var id = $(this).children("id").text();
var cname = $(this).children("cname").text();
$("#city").append("<option value='"+id+"' >"+cname)
});
} );
});
});最终效果页面：
