专栏首页木头编程 - moTzxx城市三级联动功能实现

城市三级联动功能实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/74586762

背景:

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

  • 1.使用 js 直接加载城市信息;
  • 2.自己建立数据库,然后使用 ajax 异步加载城市数据;
  • 3.借用第三方城市接口,例如阿里接口,获取数据。

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

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

1.正确引用 area.js 文件

2.对应页面 mobilepayment

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

3.实现效果

4.数据处理

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

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

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

三.第三方城市接口

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Google官方 下拉刷新组件SwipeRefreshLayout 简单实现

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

    泥豆芽儿 MT
  • 跑马灯 TextView效果设计

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

    泥豆芽儿 MT
  • webview加载应用宝 网页版界面,简单实现

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

    泥豆芽儿 MT
  • WCF技术剖析之十一:异步操作在WCF中的应用(上篇)

    按照操作执行所需的资源类型,我们可以将操作分为CPU绑定型(CPU Bound)操作和I/O绑定型(I/O Bound)操作。对于前者,操作的执行主要利用CPU...

    蒋金楠
  • 从零开始学前端,也要注意大局观

    一晃零基础web前端课程又讲一周了。 这一周我们都做了些什么呢?一是把json的编辑和获取都过了,然后是使用json来生成dom并绑定相应事件然后添加到页面中。...

    web前端教室
  • objective-C中的Class(类类型),Selector(选择器SEL),函数指针(IMP)

    今天在园子里看到了一篇牛文“Objective-C 2.0 with Cocoa Foundation--- 5,Class类型,选择器Selector以及函数...

    菩提树下的杨过
  • eeglab中文教程系列(17)-自己创建电极位置以及电极位置文件

    第三步:勾选通道的Channel in data array后面的框,红色框2处。

    脑机接口社区
  • “网红架构师”解决你的Ceph 运维难题-Part2

    本文为长篇连续剧,将分多个篇幅发表,主要介绍了从动手部署环境到后期运营故障处理过程中常见的问题,内容由浅入深,是居家旅行运维Ceph的必备良药。

    腾讯云TStack
  • 问世间敏捷开发为何物?

    我们真正要学的是用爱去开发产品;敏捷开发,工程实践都只是个工具罢了。 许多人都曾问过我类似的问题;敏捷开发的定义是什么?更有不少人,见了我就劈头大喊:我已经是敏...

    Ken Fang 方俊贤
  • Apache支持Python之CGI编程环境

    AlicFeng

扫码关注云+社区

领取腾讯云代金券