ajax相容,同時輸出省份選擇(二級聯動)
阿新 • • 發佈:2018-12-13
執行結果如下圖
單擊上圖的省份,下方列印省份
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":