jquery ajax 省市县,jquery+ajax实现省市区三级联动效果简单示例

本文实例讲述了jquery+ajax实现省市区三级联动效果。分享给大家供大家参考，具体如下：

一直想学习下Ajax,没时间,汗,这借口太牵强了.下了点教程在手机里,翻了好几遍了,没实战一次.

最近的项目里需要Ajax实现效果,就下了个jquery,然后找了个实例,学习了一下,幡然醒悟,NND,jquery果然强大的一塌糊涂,实现Ajax简直就是不费吹灰之力.下面把学习过程跟大家分享下,虽然还没有搞清楚jquery ajax的底层相关.不管了.我们不需要去发明轮子.呵呵.

先上代码,是一个省市区三级联动的ajax效果:

请选择省份A - 安徽

A - 澳门B - 北京

C - 重庆F - 福建

G - 广西G - 广东

G - 甘肃G - 贵州

H - 海南H - 湖北

H - 河南H - 湖南

H - 河北H - 黑龙江

J - 江西J - 江苏

J - 吉林L - 辽宁

N - 宁夏N - 内蒙古

Q - 青海S - 山西

S - 四川S - 上海

S - 山东S - 陕西

T - 天津T - 台湾

X - 西藏X - 新疆

X - 香港Y - 云南

Z - 浙江

请选择地级市

请选择县级市

function areas_load(id)

{

$.get("/ajax/areaajax.php", { areaid: id },

function(data){

$('#shi').html('请选择地级市');

$('#xian').html('请选择县级市');

if(id!=0) $('#shi').append(data);

});

}

function area_load(id)

{

$.get("/ajax/areaajax.php", { areaid: id },

function(data){

$('#xian').html('请选择县级市');

if(id!=0) $('#xian').append(data);

});

}

代码有些拙劣,大家见谅,下面说下这段代码的工作流程.

首先是页面中加载了jquery的js库文件,这个不用多说吧.他是ajax效果赖以实现的必不可少的环节.

当下拉框被选中,触发了onchange事件,该事件请求了一个函数areas_load(),如下:

function areas_load(id)

{

$.get("/ajax/areaajax.php", { areaid: id },

function(data){

$('#shi').html('请选择地级市');

$('#xian').html('请选择县级市');

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程序设计有所帮助。