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 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
javascript常用功能汇总
Jul 05 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
js的三种继承方式详解
Jan 21 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 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操作SVN版本服务器类代码
2011/11/27 PHP
第六章 php目录与文件操作
2011/12/30 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
python实现给数组按片赋值的方法
2015/07/28 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
代码分析Python地图坐标转换
2018/02/08 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
pycharm新建一个python工程步骤
2019/07/16 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
旷课检讨书大全
2014/01/21 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android