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 相关文章推荐
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
javascript轮播图算法
Oct 21 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 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/12/11 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
通过C++学习Python
2015/01/20 Python
python去除所有html标签的方法
2015/05/05 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
详解python-图像处理(映射变换)
2019/03/22 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
Python有参函数使用代码实例
2020/01/06 Python
python连接PostgreSQL过程解析
2020/02/09 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
行政助理的岗位职责
2014/02/18 职场文书
学生安全承诺书
2014/05/22 职场文书
干部培训简讯
2015/07/20 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
Go语言编译原理之源码调试
2022/08/05 Golang