省市联动

最新推荐文章于 2022-11-12 11:27:56 发布

女Bug王

最新推荐文章于 2022-11-12 11:27:56 发布

阅读量238

点赞数

分类专栏： javaWeb 文章标签：浏览器数据 class

本文链接：https://blog.csdn.net/weixin_38908845/article/details/77806352

版权

javaWeb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

//servlet  获取浏览器提交过来的数据  并处理数据  响应给浏览器
package com.itheima.control;
import java.io.IOException;
import java.util.List;
import java.util.Set;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONObject;
import com.itheima.utils.City;
import com.itheima.utils.Province;
import com.itheima.utils.ProvinceCityUtils;
/**
* @author lxq
*/
public class ProvinceCityServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
    ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html; charset=UTF-8");
        //获取提交的方法
        String method = request.getParameter("method");
        //判断method方法
        if("pro".equals(method)){
            //如果是pro 则选择的是省份
            Set<Province> province = ProvinceCityUtils.getProvince();
            //把得到的省份转化成json  响应给
            String jsonString = JSONObject.toJSONString(province);
            response.getWriter().write(jsonString);
        }else if("city".equals(method)){
            //如果选择的城市  则根据 传递过来的参数  省份  找出省份对应的城市
            String province = request.getParameter("province");
            List<City> city = ProvinceCityUtils.getCity(province);
            //将city转换为json 响应给浏览器
            String jsonString = JSONObject.toJSONString(city);
            response.getWriter().write(jsonString);
        }
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws
    ServletException, IOException {
        doGet(request, response);
        
    }
}

//utils  类 封装数据  并可以得到省份和城市的方法
package com.itheima.utils;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Set;
public class ProvinceCityUtils {
    //封装省份和城市
    private static final Map<Province, List<City>> map=new HashMap<Province, List<City>>();
    //初始化
    static{
        Province p1=new Province(1, "黑龙江");
        List<City> l1=new ArrayList<City>();
        l1.add(new City(1, "哈尔滨"));
        l1.add(new City(2, "大庆"));
        l1.add(new City(3, "齐齐哈尔"));
        map.put(p1, l1);
        
        Province p2=new Province(2, "吉林");
        List<City> l2=new ArrayList<City>();
        l2.add(new City(1, "长春"));
        l2.add(new City(2, "吉林"));
        l2.add(new City(3, "四平"));
        map.put(p2, l2);
        
        Province p3=new Province(3, "辽宁");
        List<City> l3=new ArrayList<City>();
        l3.add(new City(1, "沈阳"));
        l3.add(new City(2, "大连"));
        l3.add(new City(3, "葫芦岛"));
        map.put(p3, l3);
    }
    //写一个方获取省份
    public static Set<Province> getProvince(){
        Set<Province> keySet = map.keySet();
        return keySet;
    }
    //获取城市的方法
    public static  List<City> getCity(String pname){
        //根据传进来的省份  查找城市
        Set<Province> province = getProvince();
        
        for(Province p:province){
            //查找传进来的省份 对应的城市
            if(pname.equals(p.getName())){
                List<City> list = map.get(p);
                //将省份得到的所有城市信息返回
                return list;
            }
        }
        return null;//没找到
    }
}
//实体类
package com.itheima.utils;
public class Province {
     private int id;
     private String name;

package com.itheima.utils;
public class City {
     
     private int id;
     private String name;


//前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/Ajax/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
     $(function(){
           
           var url="/Ajax/ProvinceCityServlet";
           $.post(url+"?method=pro",
                     function(data){
                //解析data 由于我们服务器相应的是一个集合  得到的就是一个集合
                var pvos=eval(data);
                
                //遍历集合
                for(var i=0;i<pvos.length;i++){
                     var obj=pvos[i];
                     //把得到的每一个省份往select里面加
                     var option=$("<option>"+obj.name+"</option>");
                     //将option添加到select 里面
                     $("#province").append(option);
                }
           },"json");
           
           $("#province").change(function(){
                $("#city").html("<option>----选择城市----</option>");
                //获取选择的省份
                var province=$("#province").val();
           //因为服务器  需要根据  选择的省份  来找出对应的城市  所以需要传递参数省份
          $.post(url+"?method=city",{"province":province},function(data){
                //由于上一次  的选择会叠加  所以一直让第一行  保持选择城市
                var citys=eval(data);
                //遍历城市
                for(var i=0;i<citys.length;i++){
                     var city=citys[i];
                     var option=$("<option>"+city.name+"</option>");
                     $("#city").append(option);
                }
           },"json");
     });
});
</script>
</head>
<body>
     <!--  获取两次请求  一次是获取省份 一次是获取城市-->
     <select id="province">
           <option>----选择省份----</option>
     </select>
     <select id="city">
           <option>----选择城市----</option>
     </select>
</body>
</html>

女Bug王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
省市联动

//servlet 获取浏览器提交过来的数据并处理数据响应给浏览器package com.itheima.control;import java.io.IOException;import java.util.List;import java.util.Set;import javax.servlet.ServletException;import javax.servlet
复制链接

扫一扫

专栏目录