每天學一個jquery外掛-省市縣聯動
阿新 • • 發佈：2021-02-15
技術標籤：每天學一個jquery外掛javascriptjquery
每天一個jquery外掛-省市縣聯動
省市縣聯動
搞一個省市縣聯動的外掛，當然會用到介面，不過資料來源咋來的我會講一個最簡單的方式獲取，這種簡單的資料來源當然要自己搞啦，下面會講
效果如下
程式碼部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市縣聯動</title>
<script src="js/jquery-3.4.1.min.js" var ssxld = function(id1, id2, id3) {
var $id1 = $("#" + id1)
var $id2 = $("#" + id2)
var $id3 = $("#" + id3)
return {
$id1: $id1,
$id2: $id2,
$id3: $id3,
load: function() {
var that = this;
that.action();
that.$id1.change(function() {
var code = $(this).val();
that.changeid2(code)
//不停的看看市區下拉列表更新了沒，沒有就繼續請求，等更新了再更新縣下拉列表
var t = setInterval(function(){
var code2 = that.$id2.val();
if(code2.indexOf(code)!=-1){
clearInterval(t);
that.changeid3(code2);
}
},100)
})
that.$id2.change(function() {
var code = $(this).val();
that.changeid3(code)
})
},
action: function() {
var that = this;
that.changeid1("0")
that.changeid2("11")
that.changeid3("1101")
},
changeid1: function(code) {
var that = this;
ssxpromise(code).then(res => {
that.$id1.html("");
res.forEach(item => {
var $op = $("<option value='" + item.code + "'>" + item.name + "</option>");
$op.appendTo(that.$id1);
})
})
},
changeid2: function(code) {
var that = this;
ssxpromise(code).then(res => {
that.$id2.html("");
res.forEach(item => {
var $op = $("<option value='" + item.code + "'>" + item.name + "</option>");
$op.appendTo(that.$id2);
})
})
},
changeid3: function(code) {
var that = this;
ssxpromise(code).then(res => {
that.$id3.html("");
res.forEach(item => {
var $op = $("<option value='" + item.code + "'>" + item.name + "</option>");
$op.appendTo(that.$id3);
})
})
}
}
}
//網路請求
var ssxpromise = function(code) {
var p = new Promise((resolve, reject) => {
$.ajax({
type: 'post',
url: 'https://www.afeitool.xyz/api/Get/GetItems',
data: {
code: code
},
dataType: 'json',
success: res => {
resolve(res)
}
})
})
return p;
}
實現思路
- 當然省市縣聯動的思路很簡單如下
- 就是切換任意選項的時候，那麼他的下級列表就更換成對應的下級列表，這個一個change監控就很容易做到，上面的程式碼很清楚的展示了思路，關鍵是介面的資料時怎麼來的
- 然後講一下資料來源是咋來的，當然必須瞭解下序列化與反序列化，接著下面就是我想到的最簡單的獲得資料來源的辦法了
- 首先，我們百度搜一下省市縣編碼表，這樣子很容易就能找到別人的網站展示的的資料，再不濟找到官方提供的資料的網頁也行，管你用爬蟲還是啥的，最簡單的辦法就是直接檢視原始碼複製所有標籤到你自己的編輯器裡面，然後用js分析dom結構之後就很容易找到對應的資料結構
- 比如說下面這部分程式碼就是我對這個網頁的資料分析之後拿到的資料來源ip33.com,拿這個做例子就是學習交流哈，沒有其他惡意哈，我的處理方式就如下
$(function() {
var ssx = [];
var s1 = $(".ip").children("h4");
for (var i = 0; i < s1.length; i++) {
var temp = $(s1[i]);
var str = temp.text().split(" ");
var sheng = {
name: str[0],
code: str[1],
children: []
};
ssx.push(sheng)
var s2 = temp.next().find("h5");
for (var j = 0; j < s2.length; j++) {
var temp2 = $(s2[j]);
var str2 = temp2.text().split(" ");
var shi = {
name: str2[0],
code: str2[1],
children: [],
parentcode: str[1]
}
sheng.children.push(shi);
var x1 = temp2.next().find("li");
for (var k = 0; k < x1.length; k++) {
var temp3 = $(x1[k]);
var str3 = temp3.text().split(" ");
var xian = {
name: str3[0],
code: str3[1],
parentcode: str2[1]
}
shi.children.push(xian);
}
}
}
console.log(ssx)
})
- 在這樣處理完資料之後，我們就有了一個大概的總資料了了，接著用json.stringfy序列化成字串，隨便你傳到哪裡去，等傳到你自己的後臺之後再反序列化成你規定的格式然後挨個存入資料庫儲存，這樣子自己做一個介面的目標就完成一半了，有了資料來源就是自己規定介面的使用規則了，我這裡就不細講了，比較有個code與parentcode很明顯可以做查詢的條件的，這樣子所有資料都能給存一個表裡面，反正沒問題就是了
- 最後我臨時做了個介面在這裡，大家可以自己試著呼叫看看效果有沒有問題，反正我做外掛用著還行地址
- 最後就沒啥了，做這個外掛因為和網路有關係，所以必然會有非同步的問題存在，這裡就用大佬們開發的promise語法就能很好的解決這個問題了，既不會因為網路請求導致頁面卡頓也能在資料到來之後準時處理後續
- 完事，收工，核酸已通過，準備回家過年~