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 相关文章推荐
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
vue中axios请求的封装实例代码
Mar 23 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数据库连接
2006/10/09 PHP
php 进度条实现代码
2009/03/10 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
php批量上传的实现代码
2013/06/09 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
document.getElementById介绍
2011/09/13 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
Python批量查询域名是否被注册过
2017/06/21 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
详解python之heapq模块及排序操作
2019/04/04 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
集团公司总经理岗位职责
2013/12/20 职场文书
建筑文秘专业个人求职信范文
2013/12/28 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
乌镇导游词
2015/02/02 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书