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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
jquery中常用的SET和GET
Jan 13 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
基于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
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
完美的php分页类
2017/10/24 PHP
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
js中this的用法实例分析
2015/01/10 Javascript
javascript运动详解
2015/07/06 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
Python创建系统目录的方法
2015/03/11 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
Django 路由系统URLconf的使用
2018/10/11 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
开展批评与自我批评发言稿
2014/10/16 职场文书