jquery+ajax实现省市区三级联动效果简单示例


Posted in Javascript onJanuary 04, 2017

本文实例讲述了jquery+ajax实现省市区三级联动效果。分享给大家供大家参考,具体如下:

一直想学习下Ajax,没时间,汗,这借口太牵强了.下了点教程在手机里,翻了好几遍了,没实战一次.

最近的项目里需要Ajax实现效果,就下了个jquery,然后找了个实例,学习了一下,幡然醒悟,NND,jquery果然强大的一塌糊涂,实现Ajax简直就是不费吹灰之力.下面把学习过程跟大家分享下,虽然还没有搞清楚jquery ajax的底层相关.不管了.我们不需要去发明轮子.呵呵.

先上代码,是一个省市区三级联动的ajax效果:

<select name='sheng' onchange='JavaScript:areas_load(this.value);' class="selectclass">
<option value='0'>请选择省份</option><option value='13'>A - 安徽</option>
<option value='33'>A - 澳门</option><option value='1'>B - 北京</option>
<option value='4'>C - 重庆</option><option value='14'>F - 福建</option>
<option value='21'>G - 广西</option><option value='20'>G - 广东</option>
<option value='28'>G - 甘肃</option><option value='24'>G - 贵州</option>
<option value='22'>H - 海南</option><option value='18'>H - 湖北</option>
<option value='17'>H - 河南</option><option value='19'>H - 湖南</option>
<option value='5'>H - 河北</option><option value='10'>H - 黑龙江</option>
<option value='15'>J - 江西</option><option value='11'>J - 江苏</option>
<option value='9'>J - 吉林</option><option value='8'>L - 辽宁</option>
<option value='30'>N - 宁夏</option><option value='7'>N - 内蒙古</option>
<option value='29'>Q - 青海</option><option value='6'>S - 山西</option>
<option value='23'>S - 四川</option><option value='2'>S - 上海</option>
<option value='16'>S - 山东</option><option value='27'>S - 陕西</option>
<option value='3'>T - 天津</option><option value='34'>T - 台湾</option>
<option value='26'>X - 西藏</option><option value='31'>X - 新疆</option>
<option value='32'>X - 香港</option><option value='25'>Y - 云南</option>
<option value='12'>Z - 浙江</option>
</select>
<SELECT NAME="shi" id="shi" class="selectclass" onchange="JavaScript:area_load(this.value);">
<option value=''>请选择地级市</option>
</SELECT>
<SELECT NAME="xian" id="xian" class="selectclass">
<option value=''>请选择县级市</option>
</SELECT>
<script language="javascript">
function areas_load(id)
{
$.get("/ajax/areaajax.php", { areaid: id },
function(data){
$('#shi').html('<option value="">请选择地级市</option>');
$('#xian').html('<option value="">请选择县级市</option>');
if(id!=0) $('#shi').append(data);
 });
}
function area_load(id)
{
$.get("/ajax/areaajax.php", { areaid: id },
function(data){
$('#xian').html('<option value="">请选择县级市</option>');
if(id!=0) $('#xian').append(data);
 });
}
</script>

代码有些拙劣,大家见谅,下面说下这段代码的工作流程.

首先是页面中加载了jquery的js库文件,这个不用多说吧.他是ajax效果赖以实现的必不可少的环节.

当下拉框被选中,触发了onchange事件,该事件请求了一个函数areas_load(),如下:

function areas_load(id)
{
$.get("/ajax/areaajax.php", { areaid: id },
function(data){
$('#shi').html('<option value="">请选择地级市</option>');
$('#xian').html('<option value="">请选择县级市</option>');
if(id!=0) $('#shi').append(data);
 });
}

该函数解释如下:

当函数触发时,以get方式传递参数areaid给指定的url地址,就变成了 /ajax/areaajax.php?areaid=x 这样的地址,然后在这个php文件里接受areaid的值,输出指定的代码,function(data) 这个就是php文件里返回的全部代码,当然是在成功完成的状态下.由于jquery封装了这一过程,所以在这里首先起来是非常简便快捷的.再使用$('#shi').append(data) 赋值给指定的id.这样一个ajax的完整过程就实现了.

我只是想把最精髓的地方说给大家,让像我一样的新手不在畏惧ajax这个事物,不在局限于一大堆的教材.说的再多不如一试,想学习ajax的马上就可以开始行动起来啦.

在会用的基础上,再去研究底层实现,这样更有底气,更有耐心和信心.

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
javascript闭包的理解
Apr 01 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
js表单验证实例讲解
Mar 31 Javascript
js变量提升深入理解
Sep 16 Javascript
JavaScript数组复制详解
Feb 02 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
vue实现员工信息录入功能
Jun 11 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 #Javascript
深入理解Javascript中的valueOf与toString
Jan 04 #Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 #Javascript
js实现定时进度条完成后切换图片
Jan 04 #Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 #Javascript
深入理解JavaScript中的预解析
Jan 04 #Javascript
jQuery操作json常用方法示例
Jan 04 #Javascript
You might like
解析isset与is_null的区别
2013/08/09 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
jQuery webuploader分片上传大文件
2016/11/07 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
Python 抓取动态网页内容方案详解
2014/12/25 Python
Python列表解析配合if else的方法
2018/06/23 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
财务管理专业推荐信
2013/11/19 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
创先争优承诺书范文
2014/03/31 职场文书
协议书范本
2014/04/23 职场文书
会计个人实习计划书
2014/08/15 职场文书
乐山大佛导游词
2015/02/02 职场文书
体育教师个人总结
2015/02/09 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js