關於省市聯動的一點當心得

省市聯動，以前個人玩法是每個select變更，都發請求到後臺進行處理，後臺將json發回前臺，前臺進行後面兩層或者一層的數據填充，後來發現這樣玩效率實在太太低下，（我寫的也不太好，會形成一些無用的請求）一開始原本還好啦，但是後來咱們增長了一個功能，根據用戶所存在系統裏得地址信息來填充用戶信息，世界一會兒就很差了。咱們要將省、市、縣三條信息。寫入每一條信息後面的信息都會聯動。那麼我所遇到的問題就很麻煩了

第一步：寫入省份信息——觸發事件，清空城市信息——城市選擇框觸發change事件，向後臺請求city=null的區縣信息。城市信息填充完畢觸發事件——請求city=city的區縣信息。區縣信息填充。

這一連串的請求下來速度很慢，用戶體驗不好，並且要作成同步的，若是是異步的會形成不少匪夷所思的問題。到後來實在難以用這種方式進行下去了，因而咱們想到了讓用戶載入網頁時把城市、區縣的信息所有下載下來。省份信息由於後臺可以填充，因此就無論他了。而咱們的省市區信息都是從接口調用的，爲了保證數據的統一，我必須在後臺構建緩存的時候重建js文件。

因而就在後臺用Json.net構造了一個字典。（吐槽一下，.NET自帶的序列化器太弱了。Dictionary<string,IEnumerable<Place>>這樣的對象就沒法序列化了）城市的key用省份的ID，區縣的key用城市的ID。這樣玩我以爲是比較好的，不知道有沒有更巧妙的作法。而後後臺構造數據的時候，序列化完之後記得要加個東西：在頭上，加一個var cities=   在尾上加一個;  這樣子就造出了一個js的字典對象咯。區縣也同樣。而後把兩個js丟到一個文件裏，前臺在頁面上加一個<script src="~/scripts/places.js"></script>結束。用起來效果很好的，速度很快。能夠把引用放到body裏，由於我在後臺構造網頁的時候填充了默認值因此不太容易出現讀值的問題。

好吧，這篇博文省略了不少細節，主要觀點就是，在省市聯動的時候，最好將填充的數據作成一個獨立的js文件來處理，儘可能不要有先後臺交互，這樣體驗上會好不少（其實作起來也會方便不少，少不少代碼量）。若是有什麼須要瞭解的細節，能夠聯繫我。留言就行了~嘿嘿