利用第三方接口,实现地区联动
2017-06-20 17:22
239 查看
序言
相信很多人在需要用到省市区联动时,第一时间都会想到使用js插件。而这里提供的是一种脱离js插件而完成地区联动的方案,以供参考。
此处将用到腾讯位置服务API接口(http://lbs.qq.com/webservice_v1/guide-region.html)来获取地区信息,使用前需要注册获取应用key。
代码如下:
相信很多人在需要用到省市区联动时,第一时间都会想到使用js插件。而这里提供的是一种脱离js插件而完成地区联动的方案,以供参考。
此处将用到腾讯位置服务API接口(http://lbs.qq.com/webservice_v1/guide-region.html)来获取地区信息,使用前需要注册获取应用key。
代码如下:
<select name="province" id="province" > <option value="">请选择省份</option> </select> <select name="city" id="city" > <option value="">请选择城市</option> </select> <script src="jquery.js"></script> <script> //填充省份 $.ajax({ //OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77 type : 'GET',//请求类型 url : 'http://apis.map.qq.com/ws/district/v1/list?key=你的key&output=jsonp&callback=?',//请求地址,这里的key参数需要自行注册获取应用key,注册地址(http://lbs.qq.com/webservice_v1/guide-region.html) data : '',//请求数据,String型 async : true,//是否为异步 cache : false,//是否缓存 dataType:'jsonp',//指定jsonp类型 success : function(data){ var json = data['result'][0]; var provinceHtml = "<option value=''>请选择省份</option>"; $.each(json, function(idx, obj) { provinceHtml += "<option value="+obj.fullname+" province-id="+obj.id+">"+obj.fullname+"</option>"; }); $('#province').html(provinceHtml); } }); //点击省份填充城市 $('#province').click(function(){ var provinceId = $('#province').find("option:selected").attr('province-id'); $.ajax({ type : 'GET',//请求类型 url : 'http://apis.map.qq.com/ws/district/v1/getchildren?key=你的key&id='+provinceId+'&output=jsonp&callback=?',//请求地址 data : '',//请求数据,String型 async : true,//是否为异步 cache : false,//是否缓存 dataType:'jsonp',//指定jsonp类型 success : function(data){ var json = data['result'][0]; var provinceHtml; $.each(json, function(idx, obj) { provinceHtml += "<option value="+obj.fullname+">"+obj.fullname+"</option>"; }); $('#city').html(provinceHtml); } }); }) </script>
相关文章推荐
- jquery利用json实现地区联动效果代码
- ThinkPHP利用Ajax实现省市县地区三级联动
- ASP.NET利用JavaScript实现无刷新闪烁二级联动菜单
- 利用JavaScript+XmlHttp实现DropDownList无刷新联动
- ICallbackEventHandler接口实现多级联动
- ASP.NET利用JavaScript实现无刷新闪烁二级联动菜单
- 利用DDE接口实现Kingview5.0组态软件环境下远程监测
- 利用动态创建自动化接口实现VB的函数指针调用
- 利用IWebBrowser2接口的Navigate2方法实现Http POST传输
- 利用ICallbackEventHandler接口实现无刷新的方法(2)
- ICallbackEventHandler接口实现多级联动
- ICallbackEventHandler接口实现多级联动 (转)
- .net利用IOleCommandTarget接口实现Html编辑器表格边框的显示和隐藏(原创)
- 利用比较器接口实现类排序
- 利用JS配合XMLHTTP方法实现多级联动的例子
- 利用ICallbackEventHandler接口实现无刷新的方法(3)--示例
- VB中利用第三方控件实现QQ垂直菜单
- 利用抽象工厂实现自定义多数据类型接口
- 统一接口,利用线性表和链表实现可变长数组
- 利用VC和ADO接口编写一个dll模块实现对数据库数据的处理