AJAX案例二—省市二级联动

AJAX案例二

省市二级联动

1. 案例分析图解

2. 浏览器端

3. 创建Cityutli工具类

4. ProvinceServlet (获取省份信息)

5. CityServlet(获取城市信息)

6. 获取Province的Ajax请求

7. 获取CityAjax的请求

---

测试时问题：

CityAjax请求：send（ProvinceName）后，在CityServlet接收ProvinceName时会产生中文乱码原因，进而无法传参，获取后续城市信息。

解决：

---

源代码：

CityUtil：

***************************
package com.itcast.util;
import java.util.LinkedHashMap;
import java.util.Map;
import java.util.Set;

/**
 * @author LYJ
 * @createDate 2020-07-10-16:25
 */
public class CityUtil {
    /**
     * 全国（省，直辖市，自治区）映射集合
     */
    public static Map<String,String[]> citys=new LinkedHashMap<String, String[]>();
    static{
        citys.put("北京", new String[]{"北京"});
        citys.put("上海", new String[]{"上海"});
        citys.put("天津", new String[]{"天津"});
        citys.put("重庆", new String[]{"重庆"});
        citys.put("黑龙江", new String[]{"哈尔滨","齐齐哈尔","牡丹江","大庆","伊春","双鸭山","鹤岗","鸡西","佳木斯","七台河","黑河","绥化","大兴安岭"});
        citys.put("吉林", new String[]{"长春","延边","吉林","白山","白城","四平","松原","辽源","大安","通化"});
        citys.put("辽宁", new String[]{"沈阳","大连","葫芦岛","旅顺","本溪","抚顺","铁岭","辽阳","营口","阜新","朝阳","锦州","丹东","鞍山"});
        citys.put("内蒙古", new String[]{"呼和浩特","呼伦贝尔","锡林浩特","包头","赤峰","海拉尔","乌海","鄂尔多斯","通辽"});
        citys.put("河北", new String[]{"石家庄","唐山","张家口","廊坊","邢台","邯郸","沧州","衡水","承德","保定","秦皇岛"});
        citys.put("河南", new String[]{"郑州","开封","洛阳","平顶山","焦作","鹤壁","新乡","安阳","濮阳","许昌","漯河","三门峡","南阳","商丘","信阳","周口","驻马店"});
        citys.put("山东", new String[]{"济南","青岛","淄博","威海","曲阜","临沂","烟台","枣庄","聊城","济宁","菏泽","泰安","日照","东营","德州","滨州","莱芜","潍坊"});
        citys.put("山西", new String[]{"太原","阳泉","晋城","晋中","临汾","运城","长治","朔州","忻州","大同","吕梁"});
        citys.put("江苏", new String[]{"南京","苏州","昆山","南通","太仓","吴县","徐州","宜兴","镇江","淮安","常熟","盐城","泰州","无锡","连云港","扬州","常州","宿迁"});
        citys.put("安徽", new String[]{"合肥","巢湖","蚌埠","安庆","六安","滁州","马鞍山","阜阳","宣城","铜陵","淮北","芜湖","毫州","宿州","淮南","池州"});
        citys.put("陕西", new String[]{"西安","韩城","安康","汉中","宝鸡","咸阳","榆林","渭南","商洛","铜川","延安"});
        citys.put("宁夏", new String[]{"银川","固原","中卫","石嘴山","吴忠"});
        citys.put("甘肃", new String[]{"兰州","白银","庆阳","酒泉","天水","武威","张掖","甘南","临夏","平凉","定西","金昌"});
        citys.put("青海", new String[]{"西宁","海北","海西","黄南","果洛","玉树","海东","海南"});
        citys.put("湖北", new String[]{"武汉","宜昌","黄冈","恩施","荆州","神农架","十堰","咸宁","襄樊","孝感","随州","黄石","荆门","鄂州"});
        citys.put("湖南", new String[]{"长沙","邵阳","常德","郴州","吉首","株洲","娄底","湘潭","益阳","永州","岳阳","衡阳","怀化","韶山","张家界"});
        citys.put("浙江", new String[]{"杭州","湖州","金华","宁波","丽水","绍兴","雁荡山","衢州","嘉兴","台州","舟山","温州"});
        citys.put("江西", new String[]{"南昌","萍乡","九江","上饶","抚州","吉安","鹰潭","宜春","新余","景德镇","赣州"});
        citys.put("福建", new String[]{"福州","厦门","龙岩","南平","宁德","莆田","泉州","三明","漳州"});
        citys.put("贵州", new String[]{"贵阳","安顺","赤水","遵义","铜仁","六盘水","毕节","凯里","都匀"});
        citys.put("四川", new String[]{"成都","泸州","内江","凉山","阿坝","巴中","广元","乐山","绵阳","德阳","攀枝花","雅安","宜宾","自贡","甘孜州","达州","资阳","广安","遂宁","眉山","南充"});
        citys.put("广东", new String[]{"广州","深圳","潮州","韶关","湛江","惠州","清远","东莞","江门","茂名","肇庆","汕尾","河源","揭阳","梅州","中山","德庆","阳江","云浮","珠海","汕头","佛山"});
        citys.put("广西", new String[]{"南宁","桂林","阳朔","柳州","梧州","玉林","桂平","贺州","钦州","贵港","防城港","百色","北海","河池","来宾","崇左"});
        citys.put("云南", new String[]{"昆明","保山","楚雄","德宏","红河","临沧","怒江","曲靖","思茅","文山","玉溪","昭通","丽江","大理"});
        citys.put("海南", new String[]{"海口","三亚","儋州","琼山","通什","文昌"});
        citys.put("新疆", new String[]{"乌鲁木齐","阿勒泰","阿克苏","昌吉","哈密","和田","喀什","克拉玛依","石河子","塔城","库尔勒","吐鲁番","伊宁"});
    }
    public  static String getProvince(){
        //获得citys的键集合
        Set<String> set = citys.keySet();
        String provinces = "";
        for(String p : set){
            provinces += p+",";
        }
        return provinces.substring(0,provinces.length()-1);
    }

    public static String getCity(String ProvinceName){
        String City = "";
        for (String c : citys.get(ProvinceName)){
            City  += c+",";
        }
        return City.substring(0,City.length()-1);
    }

    public static void main(String[] args) {
        //测试
        String province = getProvince();
        System.out.println(province);
        System.out.println(getCity("黑龙江"));
    }
}

ProvinceServlet

package com.itcast.Servlet;

import com.itcast.util.CityUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author LYJ
 * @createDate 2020-07-10-16:48
 */
@WebServlet(name = "ProvinceServlet", urlPatterns = "/ProvinceServlet")
public class ProvinceServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("ProvinceServlet接受到请求");
        //获得所有省份信息
        String province = CityUtil.getProvince();
        //将省份信息回写到html中
        response.setCharacterEncoding("utf-8");
        response.getWriter().write(province);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

CityServlet

package com.itcast.Servlet;

import com.itcast.util.CityUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author LYJ
 * @createDate 2020-07-10-16:48
 */
@WebServlet(name = "CityServlet", urlPatterns = "/CityServlet")
public class CityServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("CityServlet接受到请求");
        //获取用户选择的省份信息
        request.setCharacterEncoding("utf-8");
        String provinceName = request.getParameter("ProvinceName");
        System.out.println(provinceName);
        //获得所有城市信息
        String city = CityUtil.getCity(provinceName);
        //将省份信息回写到html中
        response.setCharacterEncoding("utf-8");
        response.getWriter().write(city);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

Province-City

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JS/my.js"></script>
    <script>
        function getProvince() {
        //向服务器发送请求，获取省份信息
        var xmlhttp = getXMLHTTPRequest();
            //设置回调函数
            xmlhttp.onreadystatechange =  function(){
                //处理数据
                if (xmlhttp.readyState == 4){
                    if(xmlhttp.status == 200){
                       //处理回写数据
                        var province = xmlhttp.responseText;
                        var ps = province.split(",");
                        for(var i=0;i<ps.length;i++){
                            var option = document.createElement("option");
                            option.text = ps[i];
                            document.getElementById("Province").add(option);
                        }
                    }
                }
            };
            //设置open
            var url = "http://localhost:8080/ProvinceServlet";
            xmlhttp.open("POST",url,true);
            //第四步,真实发送数据给Servlet
            xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
            xmlhttp.send(null);

        }

        function getCity() {
            //得到选中的省份名称
            var Provnices = document.getElementById("Province");//得到省份元素
            var options = Provnices.options;//得到下拉框中所有数据
            var option = options[Provnices.selectedIndex];//得到选中对象的索引值后找到对应元素
            var ProvinceName = option.text;//得到元素内的值
            // alert(ProvinceName);

            //向服务发送请求
            //向服务器发送请求，获取对应城市信息
            var xmlhttp = getXMLHTTPRequest();
            //设置回调函数
            xmlhttp.onreadystatechange =  function(){
                //处理数据
                if (xmlhttp.readyState == 4){
                    if(xmlhttp.status == 200){
                        //处理回写数据
                        var City = xmlhttp.responseText;
                        alert(City);
                        var cs = City.split(",");
                        for(var i=0;i<cs.length;i++){
                            var option = document.createElement("option");
                            option.text = cs[i];
                            document.getElementById("City").add(option);
                        }
                    }
                }
            };
            //设置open
            var url = "http://localhost:8080/CityServlet";
            xmlhttp.open("POST",url,true);
            //第四步,真实发送数据给Servlet
            xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
            xmlhttp.send("ProvinceName="+ProvinceName);
        }
    </script>

</head>
<body onload="getProvince()">
<select id="Province" onchange="getCity()">
    <option>--请选择省份--</option>
</select>

<select id="City">
    <option>--请选择城市--</option>
</select>
</body>
</html>