1. 程式人生 > >ajax相容,同時輸出省份選擇(二級聯動)

ajax相容,同時輸出省份選擇(二級聯動)

執行結果如下圖

單擊上圖的省份,下方列印省份

html程式碼如下圖

<div id="province"></div>
<div id="city"></div>

css程式碼如下圖

*{
    margin: 0;
    padding: 0;
}
div{
    width: 100%;
    padding: 10px;
}
div>a{
    display: inline-block;
    text-align: center;
    width: 200px;
    height: 30px;
    line-height
: 30px; margin: 10px 20px; background-color: aqua; } a:hover{ background-color: darkturquoise; color: white; }

js程式碼如下圖

function myajax(method,Url,ajText,fn) {
    //ajax標準程式碼
    let xhr=null;
    if (window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else {
        xhr=new 
ActiveXObject("Msxm12.XMLHTTP"); } //判斷是什麼傳入方式 if (method=="get"){ xhr.open("get",Url,true); xhr.send() } else if (method=="post") { xhr.open("post",Url,true); xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); let date=ajText||""
; xhr.send(date); } //判斷伺服器是否正確返回資料,並在外部封裝方法 xhr.onreadystatechange=function () { if (xhr.readyState==4){ if (xhr.status==200){ fn(xhr.responseText); } } }; }
//呼叫myajax函式,並編寫對應的方法
myajax("post","province.json","",function (uss) {
    //得到伺服器的返回值uss,因為是文字需要裝換為json
    let json=JSON.parse(uss);
    //遍歷json
    for(x in json){
        //建立一個a標籤並給他的內容賦值,並新增id
        let a1=document.createElement("a");
        a1.innerText=json[x].name;
        a1.id=json[x].id;
        //將a1新增進html的province標籤中
        document.getElementById("province").appendChild(a1);
        //給a1新增單擊事件繫結
        a1.addEventListener("click",function () {
            //將a1的id傳入用於檢索下一項內容
            let cityID=this.id;
            //將另一個伺服器的json傳入
            myajax("post","city.json","",function (sub) {
                //引入另一個頁面中的div
                let cityDiv=document.getElementById("city");
                cityDiv.innerHTML="";
                let suJson=JSON.parse(sub);
                //遍歷新傳入的json
                for (t in suJson){
                    //判斷json中是否有和傳入數值相同的值
                    if (t==cityID)
                        for (z in suJson[t]) {
                            //新建a標籤,並賦值
                            let aa1=document.createElement("a");
                            aa1.innerText=suJson[t][z].name;
                            aa1.id=suJson[t][z].id;
                            //將a標籤填入html的div中
                            cityDiv.appendChild(aa1);
                        }
                }
            })
        })
    }
});

下圖為傳入的JSON(不是很重要)

province.json

[{
    "name": "北京市",
    "id": "110000"
}, {
    "name": "天津市",
    "id": "120000"
}, {
    "name": "河北省",
    "id": "130000"
}, {
    "name": "山西省",
    "id": "140000"
}, {
    "name": "內蒙古自治區", 
    "id": "150000"
}, {
    "name": "遼寧省",
    "id": "210000"
}, {
    "name": "吉林省",
    "id": "220000"
}, {
    "name": "黑龍江省",
    "id": "230000"
}, {
    "name": "上海市",
    "id": "310000"
}, {
    "name": "江蘇省",
    "id": "320000"
}, {
    "name": "浙江省",
    "id": "330000"
}, {
    "name": "安徽省",
    "id": "340000"
}, {
    "name": "福建省",
    "id": "350000"
}, {
    "name": "江西省",
    "id": "360000"
}, {
    "name": "山東省",
    "id": "370000"
}, {
    "name": "河南省",
    "id": "410000"
}, {
    "name": "湖北省",
    "id": "420000"
}, {
    "name": "湖南省",
    "id": "430000"
}, {
    "name": "廣東省",
    "id": "440000"
}, {
    "name": "廣西壯族自治區",
    "id": "450000"
}, {
    "name": "海南省",
    "id": "460000"
}, {
    "name": "重慶市",
    "id": "500000"
}, {
    "name": "四川省",
    "id": "510000"
}, {
    "name": "貴州省",
    "id": "520000"
}, {
    "name": "雲南省",
    "id": "530000"
}, {
    "name": "西藏自治區",  
    "id": "540000"
}, {
    "name": "陝西省",
    "id": "610000"
}, {
    "name": "甘肅省",
    "id": "620000"
}, {
    "name": "青海省",
    "id": "630000"
}, {
    "name": "寧夏回族自治區",
    "id": "640000"
}, {
    "name": "新疆維吾爾自治區",
    "id": "650000"
}, {
    "name": "臺灣省",
    "id": "710000"
}, {
    "name": "香港特別行政區",
    "id": "810000"
}, {
    "name": "澳門特別行政區",
    "id": "820000"
}]

city.json

{
    "110000": [
        {
            "province": "北京市", 
            "name": "市轄區", 
            "id": "110100"
        }
    ], 
    "120000": [
        {
            "province": "天津市", 
            "name": "市轄區", 
            "id": "120100"
        }
    ], 
    "130000": [
        {
            "province": "河北省", 
            "name": "石家莊市", 
            "id": "130100"
        }, 
        {
            "province": "河北省", 
            "name": "唐山市", 
            "id": "130200"
        }, 
        {
            "province": "河北省", 
            "name": "秦皇島市", 
            "id": "130300"
        }, 
        {
            "province": "河北省", 
            "name": "邯鄲市", 
            "id": "130400"
        }, 
        {
            "province": "河北省", 
            "name": "邢臺市", 
            "id": "130500"
        }, 
        {
            "province": "河北省", 
            "name": "保定市", 
            "id": "130600"
        }, 
        {
            "province": "河北省", 
            "name": "張家口市", 
            "id": "130700"
        }, 
        {
            "province": "河北省", 
            "name": "承德市", 
            "id": "130800"
        }, 
        {
            "province": "河北省", 
            "name": "滄州市", 
            "id": "130900"
        }, 
        {
            "province": "河北省", 
            "name": "廊坊市", 
            "id": "131000"
        }, 
        {
            "province": "河北省", 
            "name": "衡水市", 
            "id": "131100"
        }, 
        {
            "province": "河北省", 
            "name": "省直轄縣級行政區劃", 
            "id": "139000"
        }
    ], 
    "140000": [
        {
            "province": "山西省", 
            "name": "太原市", 
            "id": "140100"
        }, 
        {
            "province": "山西省", 
            "name": "大同市", 
            "id": "140200"
        }, 
        {
            "province": "山西省", 
            "name": "陽泉市", 
            "id": "140300"
        }, 
        {
            "province": "山西省", 
            "name": "長治市", 
            "id": "140400"
        }, 
        {
            "province": "山西省", 
            "name": "晉城市", 
            "id": "140500"
        }, 
        {
            "province": "山西省", 
            "name": "朔州市", 
            "id": "140600"
        }, 
        {
            "province": "山西省", 
            "name": "晉中市", 
            "id": "140700"
        }, 
        {
            "province": "山西省", 
            "name": "運城市", 
            "id": "140800"
        }, 
        {
            "province": "山西省", 
            "name": "忻州市", 
            "id": "140900"
        }, 
        {
            "province": "山西省", 
            "name": "臨汾市", 
            "id": "141000"
        }, 
        {
            "province": "山西省", 
            "name": "呂梁市", 
            "id": "141100"
        }
    ], 
    "150000": [
        {
            "province": "內蒙古自治區", 
            "name": "呼和浩特市", 
            "id": "150100"
        }, 
        {
            "province": "內蒙古自治區", 
            "name": "包頭市", 
            "id": "150200"
        }, 
        {
            "province": "內蒙古自治區", 
            "name": "烏海市", 
            "id": "150300"
        }, 
        {
            "province": "內蒙古自治區", 
            "name": "赤峰市", 
            "id": "150400"
        }, 
        {
            "province": "內蒙古自治區", 
            "name": "通遼市", 
            "id": "150500"
        }, 
        {
            "province": "內蒙古自治區", 
            "name": "鄂爾多斯市", 
            "id": "150600"
        }, 
        {
            "province": "內蒙古自治區", 
            "name": "呼倫貝爾市", 
            "id": "150700"
        }, 
        {
            "province": "內蒙古自治區", 
            "name": "巴彥淖爾市", 
            "id": "150800"
        }, 
        {
            "province": "內蒙古自治區", 
            "name": "烏蘭察布市", 
            "id": "150900"
        }, 
        {
            "province": "內蒙古自治區", 
            "name": "興安盟", 
            "id": "152200"
        }, 
        {
            "province": "內蒙古自治區", 
            "name": "錫林郭勒盟", 
            "id": "152500"
        }, 
        {
            "province": "內蒙古自治區", 
            "name": "阿拉善盟", 
            "id": "152900"
        }
    ], 
    "210000": [
        {
            "province": "遼寧省", 
            "name": "瀋陽市", 
            "id": "210100"
        }, 
        {
            "province": "遼寧省", 
            "name": "大連市", 
            "id": "210200"
        }, 
        {
            "province": "遼寧省", 
            "name": "鞍山市", 
            "id": "210300"
        }, 
        {
            "province": "遼寧省", 
            "name": "撫順市", 
            "id": "210400"
        }, 
        {
            "province": "遼寧省", 
            "name": "本溪市", 
            "id": "210500"
        }, 
        {
            "province": "遼寧省", 
            "name": "丹東市", 
            "id": "210600"
        }, 
        {
            "province": "遼寧省", 
            "name": "錦州市", 
            "id": "210700"
        }, 
        {
            "province": "遼寧省", 
            "name": "營口市", 
            "id": "210800"
        }, 
        {
            "province": "遼寧省", 
            "name": "阜新市", 
            "id": "210900"
        }, 
        {
            "province": "遼寧省", 
            "name": "遼陽市", 
            "id": "211000"
        }, 
        {
            "province": "遼寧省", 
            "name": "盤錦市", 
            "id": "211100"
        }, 
        {
            "province": "遼寧省", 
            "name": "鐵嶺市", 
            "id": "211200"
        }, 
        {
            "province": "遼寧省", 
            "name": "朝陽市", 
            "id": "211300"
        }, 
        {
            "province": "遼寧省", 
            "name": "葫蘆島市", 
            "id": "211400"
        }
    ], 
    "220000": [
        {
            "province": "吉林省", 
            "name": "長春市", 
            "id": "220100"
        }, 
        {
            "province": "吉林省", 
            "name": "吉林市", 
            "id": "220200"
        }, 
        {
            "province": "吉林省", 
            "name": "四平市", 
            "id": "220300"
        }, 
        {
            "province": "吉林省", 
            "name": "遼源市", 
            "id": "220400"
        }, 
        {
            "province": "吉林省", 
            "name": "通化市", 
            "id": "220500"
        }, 
        {
            "province": "吉林省", 
            "name": "白山市", 
            "id": "220600"
        }, 
        {
            "province": "吉林省", 
            "name": "松原市", 
            "id": "220700"
        }, 
        {
            "province": "吉林省", 
            "name": "白城市", 
            "id": "220800"
        }, 
        {
            "province": "吉林省", 
            "name": "延邊朝鮮族自治州", 
            "id": "222400"
        }
    ], 
    "230000": [
        {
            "province": "黑龍江省", 
            "name": "哈爾濱市", 
            "id": "230100"
        }, 
        {
            "province": "黑龍江省", 
            "name": "齊齊哈爾市", 
            "id": "230200"
        }, 
        {
            "province": "黑龍江省", 
            "name": "雞西市", 
            "id": "230300"
        }, 
        {
            "province": "黑龍江省", 
            "name": "鶴崗市", 
            "id": "230400"
        }, 
        {
            "province": "黑龍江省", 
            "name": "雙鴨山市", 
            "id": "230500"
        }, 
        {
            "province": "黑龍江省", 
            "name": "大慶市", 
            "id": "230600"
        }, 
        {
            "province": "黑龍江省", 
            "name": "伊春市", 
            "id": "230700"
        }, 
        {
            "province": "黑龍江省", 
            "name": "佳木斯市", 
            "id": "230800"
        }, 
        {
            "province": "黑龍江省", 
            "name": "七臺河市", 
            "id": "230900"
        }, 
        {
            "province": "黑龍江省", 
            "name": "牡丹江市", 
            "id": "231000"
        }, 
        {
            "province": "黑龍江省", 
            "name": "黑河市", 
            "id": "231100"
        }, 
        {
            "province": "黑龍江省", 
            "name": "綏化市", 
            "id": "231200"
        }, 
        {
            "province": "黑龍江省", 
            "name": "大興安嶺地區", 
            "id": "232700"
        }
    ], 
    "310000": [
        {
            "province": "上海市", 
            "name": "市轄區", 
            "id": "310100"
        }
    ], 
    "320000": [
        {
            "province": "江蘇省", 
            "name": "南京市", 
            "id": "320100"
        }, 
        {
            "province": "江蘇省", 
            "name": "無錫市", 
            "id": "320200"
        }, 
        {
            "province": "江蘇省", 
            "name": "徐州市", 
            "id": "320300"
        }, 
        {
            "province": "江蘇省", 
            "name": "常州市", 
            "id": "320400"
        }, 
        {
            "province": "江蘇省", 
            "name": "蘇州市", 
            "id": "320500"
        }, 
        {
            "province": "江蘇省", 
            "name": "南通市", 
            "id": "320600"
        }, 
        {
            "province": "江蘇省", 
            "name": "連雲港市", 
            "id": "320700"
        }, 
        {
            "province": "江蘇省", 
            "name": "淮安市", 
            "id": "320800"
        }, 
        {
            "province": "江蘇省", 
            "name": "鹽城市", 
            "id": "320900"
        }, 
        {
            "province": "江蘇省", 
            "name": "揚州市", 
            "id": "321000"
        }, 
        {
            "province": "江蘇省", 
            "name": "鎮江市", 
            "id": "321100"
        }, 
        {
            "province": "江蘇省", 
            "name": "泰州市", 
            "id": "321200"
        }, 
        {
            "province": "江蘇省", 
            "name": "宿遷市", 
            "id": "321300"
        }
    ], 
    "330000": [
        {
            "province": "浙江省", 
            "name": "杭州市", 
            "id": "330100"
        }, 
        {
            "province": "浙江省", 
            "name": "寧波市", 
            "id": "330200"
        }, 
        {
            "province": "浙江省", 
            "name": "溫州市", 
            "id": "330300"
        }, 
        {
            "province": "浙江省", 
            "name": "嘉興市", 
            "id": "330400"
        }, 
        {
            "province": "浙江省", 
            "name": "湖州市", 
            "id": "330500"
        }, 
        {
            "province": "浙江省", 
            "name": "紹興市", 
            "id": "330600"
        }, 
        {
            "province": "浙江省", 
            "name": "金華市", 
            "id": "330700"
        }, 
        {
            "province": "浙江省", 
            "name": "衢州市", 
            "id": "330800"
        }, 
        {
            "province": "浙江省", 
            "name": "舟山市", 
            "id": "330900"
        }, 
        {
            "province": "浙江省", 
            "name": "台州市", 
            "id": "331000"
        }, 
        {
            "province": "浙江省", 
            "name": "麗水市", 
            "id": "331100"
        }
    ], 
    "340000": [
        {
            "province": "安徽省", 
            "name": "合肥市", 
            "id": "340100"
        }, 
        {
            "province": "安徽省", 
            "name": "蕪湖市", 
            "id": "340200"
        }, 
        {
            "province": "安徽省", 
            "name": "蚌埠市", 
            "id": "340300"
        }, 
        {
            "province": "安徽省", 
            "name": "淮南市", 
            "id": "340400"
        }, 
        {
            "province": "安徽省", 
            "name": "馬鞍山市", 
            "id": "340500"
        }, 
        {
            "province": "安徽省", 
            "name": "淮北市", 
            "id": "340600"
        }, 
        {
            "province": "安徽省", 
            "name": "銅陵市", 
            "id": "340700"
        }, 
        {
            "province": "安徽省", 
            "name": "安慶市", 
            "id": "340800"
        }, 
        {
            "province": "安徽省", 
            "name": "黃山市", 
            "id": "341000"
        }, 
        {
            "province": "安徽省", 
            "name": "滁州市", 
            "id": "341100"
        }, 
        {
            "province": "安徽省", 
            "name": "阜陽市", 
            "id": "341200"
        }, 
        {
            "province": "安徽省", 
            "name": "宿州市", 
            "id": "341300"
        }, 
        {
            "province": "安徽省", 
            "name": "六安市", 
            "id": "341500"
        }, 
        {
            "province": "安徽省", 
            "name": "亳州市", 
            "id": "341600"
        }, 
        {
            "province": "安徽省", 
            "name": "池州市", 
            "id": "341700"
        }, 
        {
            "province": "安徽省", 
            "name": "宣城市", 
            "id": "341800"
        }
    ], 
    "350000": [
        {
            "province": "福建省", 
            "name": "福州市", 
            "id": "350100"
        }, 
        {
            "province": "福建省", 
            "name": "廈門市", 
            "id": "350200"
        }, 
        {
            "province": "福建省", 
            "name": "莆田市", 
            "id": "350300"
        }, 
        {
            "province": "福建省", 
            "name": "三明市", 
            "id": "350400"
        }, 
        {
            "province": "福建省", 
            "name": "泉州市", 
            "id": "350500"
        }, 
        {
            "province": "福建省", 
            "name": "漳州市", 
            "id": "350600"
        }, 
        {
            "province": "福建省", 
            "name": "南平市", 
            "id": "350700"
        }, 
        {
            "province": "福建省", 
            "name": "龍巖市", 
            "id": "350800"
        }, 
        {
            "province": "福建省", 
            "name": "寧德市", 
            "id": "350900"
        }
    ], 
    "360000": [
        {
            "province": "江西省", 
            "name": "南昌市", 
            "id": "360100"
        }, 
        {
            "province": "江西省", 
            "name": "景德鎮市", 
            "id": "360200"
        }, 
        {
            "province": "江西省", 
            "name": "萍鄉市", 
            "id": "360300"
        }, 
        {
            "province": "江西省", 
            "name": "九江市", 
            "id": "360400"
        }, 
        {
            "province": "江西省", 
            "name": "新餘市", 
            "id": "360500"
        }, 
        {
            "province": "江西省", 
            "name": "鷹潭市", 
            "id": "360600"
        }, 
        {
            "province": "江西省", 
            "name": "贛州市", 
            "id": "360700"
        }, 
        {
            "province": "江西省", 
            "name": "吉安市", 
            "id": "360800"
        }, 
        {
            "province": "江西省", 
            "name": "宜春市", 
            "id": "360900"
        }, 
        {
            "province": "江西省", 
            "name": "撫州市", 
            "id": "361000"
        }, 
        {
            "province": "江西省", 
            "name": "上饒市", 
            "id": "361100"
        }
    ], 
    "370000": [
        {
            "province": "山東省", 
            "name": "濟南市", 
            "id": "370100"
        }, 
        {
            "province": "山東省", 
            "name": "青島市", 
            "id": "370200"
        }, 
        {
            "province": "山東省", 
            "name": "淄博市", 
            "id": "370300"
        }, 
        {
            "province": "山東省", 
            "name": "棗莊市", 
            "id": "370400"
        }, 
        {
            "province": "山東省", 
            "name": "東營市", 
            "id": "370500"
        }, 
        {
            "province": "山東省", 
            "name": "煙臺市", 
            "id": "370600"
        }, 
        {
            "province": "山東省", 
            "name": "濰坊市", 
            "id": "370700"
        }, 
        {
            "province": "山東省", 
            "name": "濟寧市", 
            "id": "370800"
        }, 
        {
            "province": "山東省", 
            "name": "泰安市", 
            "id": "370900"
        }, 
        {
            "province": "山東省", 
            "name": "威海市", 
            "id": "371000"
        }, 
        {
            "province": "山東省", 
            "name": "日照市", 
            "id": "371100"
        }, 
        {
            "province": "山東省", 
            "name": "萊蕪市", 
            "id": "371200"
        }, 
        {
            "province": "山東省", 
            "name": "臨沂市", 
            "id": "371300"
        }, 
        {
            "province": "山東省", 
            "name": "德州市", 
            "id": "371400"
        }, 
        {
            "province": "山東省", 
            "name": "聊城市", 
            "id": "371500"
        }, 
        {
            "province": "山東省", 
            "name": "濱州市", 
            "id": "371600"
        }, 
        {
            "province": "山東省", 
            "name": "菏澤市", 
            "id": "371700"
        }
    ], 
    "410000": [
        {
            "province": "河南省", 
            "name": "鄭州市", 
            "id": "410100"
        }, 
        {
            "province": "河南省", 
            "name": "開封市", 
            "id": "410200"
        }, 
        {
            "province": "河南省", 
            "name": "洛陽市", 
            "id": "410300"
        }, 
        {
            "province":