首页 > 想做一个省市区的三级联动,怎么设计(代码和数据组织)更合理?

想做一个省市区的三级联动,怎么设计(代码和数据组织)更合理?

想做一个省市区的三级联动,怎么设计(代码和数据组织)更合理?


别太担心,原则有这些:

  1. 只有HARD CODE是绝不可原谅的。但如果在HTML中,数据还很少,也可以例外。
  2. 选好省级之后等待一下没有问题,但选好市级了还要等就有点沮丧。
  3. 可以增加文件数量来做缓存,但又别增加的太多太碎。
  4. 小程序怎样都无所谓。

省市区的列表我做过,如果单一文件需要70KB以上来保存(json),这个尺寸也不小。

所以建议存储结构为一级多个文件:每个省的数据分开,每省一个文件为该省的市和区列表。至于省的列表,不妨直接写进HTML里。选择(或修改了)省之后,AJAX加载后两级,把市区两级的下拉框填充上。别忘了可以把静态文件托管到外部CDN上,节省服务器资源。

不过如果你的网站规模够小,或干脆是用于本地程序就无所谓了,省市区一个文件全扔进去就行。

存储结构我建议json,简单有效。虽不像数据库那样可以查询或部分传输,但其实也根本不需要。——这个事情有个反面教材是Discuz X:他们居然把省市区这种死数据存入MySQL!一个程序员的愚蠢,害全中国的站长一起浪费宝贵的数据库资源,简直是罪无可逭。


首先省市区三级的数据在后台都有db在维护,有程序每隔一段时间会更新这些省市区数据的。 如果是完整数据的话,文件较大,前端压力不大可以考虑,做成json或者对象hash都行。 如果是每次select change的时候做ajax访问,那市和区就做成hash缓存,用动态语言直接查缓存返回。也可以hash成多个文件,ajax的时候直接访问对应编号的文件。 至于前端js代码的话,写个类封装下,这样复用起来比较方便。


无限级递归树形数据结构

【热门文章】
【热门文章】