关于省市联动的一点小心得

省市联动，之前我的玩法是每一个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文件来处理，尽量不要有前后台交互，这样体验上会好很多（其实做起来也会方便很多，少很多代码量）。如果有什么需要了解的细节，可以联系我。留言就好了~嘿嘿