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 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
Bootstrap插件全集
Jul 18 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
layui数据表格重载实现往后台传参
Nov 15 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基础学习笔记
2007/03/18 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
js document.write()使用介绍
2014/02/21 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
浅谈Redux中间件的实践
2018/07/27 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
财务管理专业毕业生求职信范文
2013/09/21 职场文书
中学生获奖感言
2014/02/04 职场文书
大学三年计划书范文
2014/04/30 职场文书
群众路线专项整治方案
2014/10/27 职场文书
社区重阳节活动总结
2015/03/24 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android