城市三级联动功能实现

背景：

最近在进行商品购买流程的开发，需要用户填写自己的收货地址，为了保证地址的准确性，需要使用到全国城市的三级联动功能
其中可以有三个思路：

1.使用 js 直接加载城市信息；

2.自己建立数据库，然后使用 ajax 异步加载城市数据；

3.借用第三方城市接口，例如阿里接口，获取数据。

一.html 触发点击事件，直接获取js中的城市数据

首先，这个功能在实现上最简单，本人参考了度娘搜索的纯 js 实现网页，需要提醒的源代码适用的 jQuery 版本已经过低，建议可参考其网页下面的网友回复
我将代码做了处理整合到 ThinkPHP 框架中，下面介绍一下实现效果：

1.正确引用 area.js 文件

2.对应页面 mobilepayment

因为不同的框架对于模板公共文件的引用方法不同，可自行编辑

3.实现效果

4.数据处理

待三级城市信息显示完全可以使用ajax 异步提交到后台进行数据的插入即可。

二.创建数据库， ajax 异步加载城市数据

此方法需要获取到全国的城市数据，网上搜索下载一般会是word文档或者excel表的形式
记得mysql数据库可以直接将excel文件转储到数据表，之后就是进行数据的异步获取，此处提供之前所写的类似功能数据库三级分类，敬请指摘

三.第三方城市接口

网上看到一篇文章—中国城市三级联动数据获取方法现，值得推荐…

城市三级联动功能实现相关推荐

php省城联动_thinkPHP实现的省市区三级联动功能示例
本文实例讲述了thinkPHP实现的省市区三级联动功能.分享给大家供大家参考,具体如下: 一张表实现省市区三级联动[3409条数据] 1. php代码: public function index() ...
PHP三级联动视频教程,PHP教程：thinkPHP实现的省市区三级联动功能示例
<PHP教程:thinkPHP实现的省市区三级联动功能示例>要点: 本文介绍了PHP教程:thinkPHP实现的省市区三级联动功能示例,希望对您有用.如果有疑问,可以联系我们. 本文实例讲 ...
台湾、香港、澳门的城市三级联动json
台湾.香港.澳门的城市三级联动json =========== 台湾 ============ {"citys": [{"areas": [{"are ...
收货地址的JavaScript城市三级联动【干货拿走不谢！＞_＜】
城市三级联动在我们网上购物时会有收货地址一栏让我们选择收货地址,当中有省.市.区等选择项,如下图: 在添加收货地址时我们会先选择省再选市最后选所在区,这些都是下拉列表式的选择,选择完成才会填写具体地 ...
php省市区三级联动,thinkPHP实现的省市区三级联动功能示例
这篇文章主要介绍了thinkPHP实现的省市区三级联动功能,详细分析了thinkPHP实现省市区三级联动功能的详细步骤与相关操作技巧,需要的朋友可以参考下本文实例讲述了thinkPHP实现的省市区三 ...
使用React实现选择城市三级联动组件
以下代码是初期写的代码,后来对代码进行优化,解决了初期的bug.完整的选择城市三级联动组件可以参考我的github项目中的代码,这是后期调试成功上传上去的React选择城市三级联动组件 <Sel ...
iOS 开发带区号的城市三级联动（xml解析）
iOS 开发带区号的城市三级联动(xml解析) demo下载地址: http://download.csdn.net/detail/qq_20176153/9514906
【web前端性能优化】13.城市三级联动
最近做项目遇到一个城市三级联动的前端问题,感觉一个城市三级联动如果引入一个jquery库,有点太重了,于是就在网上找到了原始的js写法,感觉还挺好用的就记录一下,如下图所示: pay.html < ...
全国城市三级联动 html+js
全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...

城市三级联动功能实现

背景：

一.html 触发点击事件，直接获取js中的城市数据

1.正确引用 area.js 文件

2.对应页面 mobilepayment

3.实现效果

4.数据处理

二.创建数据库， ajax 异步加载城市数据

三.第三方城市接口

城市三级联动功能实现相关推荐

最新文章

热门文章