一、搭建环境(在仿百度的环境下) 1.在之前仿百度的数据库中新建city表
2.准备jsp页面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <body> 省份: <select name="province" id ="province"> <option value="" >-请选择 - <option value="1" >广东 <option value="2" >湖南 <option value="3" >湖北 <option value="4" >四川 </select> 城市: <select name="city" id="city"> <option value="" >-请选择 - </select> </body>
页面结果:
最终框架:
二、dao和impl层实现(需要添加CityBean和list集合) dao接口写方法:
1 2 3 public interface CityDao { List<CityBean> findCity(int pid) throws SQLException; }
daoImpl具体实现接口方法:
1 2 3 4 5 6 7 8 9 10 public class CityDaoImpl implements CityDao{ @Override public List<CityBean> findCity(int pid) throws SQLException { //1.使用DBUtils的对象 QueryRunner runner=new QueryRunner(JDBCUtil02.getDataSource()); //2.调用方法 String sql="select * from city where pid=?"; return runner.query(sql, new BeanListHandler<CityBean>(CityBean.class),pid); } }
三、Servlet实现(使用XStream框架) Servlet三步骤:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 //1.获取省份id (pid) int pid=Integer.parseInt(request.getParameter("pid")); //2.dao实现 找到所有符合的城市 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"); //返回的是一份有中文的xml文件(小心坑)!!!!!!! response.getWriter().write(xml);
第三步需要用Xstream–将bean对象为xml(导入jar包)
尝试手动添加pid,然后看看转换出来的样子:
四、 完善jsp页面和功能# city.jsp页面引入jq的包和功能实现文件city.js(单独写)
city.jsp页面:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <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> <!-- 调用jq包 --> <script type="text/javascript" src="js/city.js"></script> <!-- 具体的jq代码去city.js找 --> </head> <body> 省份: <select name="province" id ="province"> <option value="" >-请选择 - <option value="1" >广东 <option value="2" >湖南 <option value="3" >湖北 <option value="4" >四川 </select> 城市: <select name="city" id="city"> <option value="" >-请选择 - </select> </body>
完成功能的city.js文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 $(function(){ //1.找到省份元素 $("#province").change(function(){ //2.一旦里面的值改变---去找城市数据 //获取值 var pid=$(this).val(); $.post("CityServlet",{pid:pid},function(data,status){ //pid:pid(省份id值) //先清空以前的值 $("#city").html("<option value=''> -请选择-"); //遍历: $(data).find("city").each(function(){ // 从data里面使用find找到xml文件所有city标签---each迭代 //取city的孩子chidren var id=$(this).children("id").text(); //val是取值 text是转成文本 var cname=$(this).children("cname").text(); //val是取值 text是转成文本 $("#city").append("<option value='"+id+"'>"+cname); }); }); }); });
city.js文件步骤分析:
1 2 3 4 5 6 7 1. 先要通过province的id值change获取省份元素 2. 获取pid的值 2.1 使用post来响应 2.1.1 通过html()来赋值为0(清空) 2.1.2 循环取出xml文件内的cname值 通过find()来找到所有的cname标---然后each迭代--通过children找到所属的cname值 找到之后通过append()添加
五、代码框架 代码框架:
六、Json 服务器和客户端数据传输方式:
1 2 3 4 5 6 7 8 9 10 11 12 <list> <city> <id>1<id> <pid>1</pid> <cname>深圳</cname> </city> <city > <id>2<id> <pid>1</pid> <cname>东莞</cname> </city> </list>
1 2 3 4 5 6 7 8 9 10 11 12 13 [ { "cname": "深圳", "id": 1, "pid": 1 }, { "cname": "东莞", "id": 2, "pid": 1 } ... ]
使用json格式数据显示省市联动效果 1. 导入jar包
2. 编写servlet代码(第三步不同)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 //1. 获取参数 int pid = Integer.parseInt(request.getParameter("pid")); //2 dao实现--找出所有的城市 CityDao dao = new CityDaoImpl(); List<CityBean> list = dao.findCity(pid); //3. 把list ---> json数据 //JSONArray ---> 变成数组 , 集合 [] //JSONObject ---> 变成简单的数据 { name : zhangsan , age:18} JSONArray jsonArray = JSONArray.fromObject(list); //转成对象 String json = jsonArray.toString(); //弄成字符串 response.setContentType("text/html;charset=utf-8"); response.getWriter().write(json);
3. 编写页面
还是原来的主页面只不过跳转现在的json.js代码:
1 2 3 4 5 6 7 8 <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> <!-- 调用jq包 --> <!-- <script type="text/javascript" src="js/city.js"></script> 具体的jq代码去city.js找 --> <script type="text/javascript" src="js/json.js"></script> <!-- 具体的jq代码去json.js找 --> </head>
json.js代码(只是each不同)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $(function() { //1.找到省份的元素 $("#province").change(function() { //2. 一旦里面的值发生了改变,那么就去请求该省份的城市数据 //$("#province").varl(); var pid = $(this).val(); $.post( "CityServlet02",{pid:pid} ,function(data,status){ //先清空 $("#city").html("<option value='' >-请选择-"); //再遍历,追加 $(data).each(function(index , c) { $("#city").append("<option value='"+c.id+"' >"+c.cname) }); },"json" ); }); });
两者展示的js文件区别(each迭代方式不同)
<
Filter
Listener
>