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 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
微信小程序实现watch监听
Jun 04 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
php&amp;java(一)
2006/10/09 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
PHP获取文件行数的方法
2015/06/10 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
Python pass 语句使用示例
2014/03/11 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
怎样使用Python脚本日志功能
2016/08/14 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
python实现随机漫步方法和原理
2019/06/10 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
python实现四人制扑克牌游戏
2020/04/22 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
Gap英国官网:Gap UK
2018/07/18 全球购物
高中生自我评价个人范文
2013/11/09 职场文书
建筑工程专业学生的自我评价
2013/12/25 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
出国留学经济担保书
2014/04/01 职场文书
2014离婚协议书范文
2014/09/10 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书