jquery ajax原来Ajax如此简单_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的马上就可以开始行动起来啦.

在会用的基础上,再去研究底层实现,这样更有底气,更有耐心和信心.

评论

6 楼 化蝶自在飞 2010-10-20  

zachary.guo 写道

化蝶自在飞 写道

如果用json的话,在客户端js是不是还要组装呢?json我没了解过哦.

如果这样的话，赶紧抽时间问问谷老师，多了解下 json 的知识，对你有好处的。

经过学习了解到php是可以直接返回json数据的哦.php json_encode()函数.然后js可以用jQuery.parseJSON(data)解析.

5 楼 zachary.guo 2010-05-05  

化蝶自在飞 写道

如果用json的话,在客户端js是不是还要组装呢?json我没了解过哦.

如果这样的话，赶紧抽时间问问谷老师，多了解下 json 的知识，对你有好处的。

4 楼 化蝶自在飞 2010-05-05  

仅仅

zachary.guo 写道

呵呵，了解 ajax 底层请求的若干个状态变化，可以在任意一个状态改变时进行相应的回调处理。底层的细节还是要抽空看看，学习嘛，核心的学会了，就不用局限 jquery 这一个框架了。

同时，看了你的代码：

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

我想，你返回的 data 其实不是真正意义上的 data(数据)，而是穿了衣服的 data(view + data)，即你的 data 可能是这样的 <option>...</option><option>...</option><option>...</option>。

其实呢，作为 ajax 的数据而言，xml 是很少用的了，使用 json 格式更为方便，更为简洁。它代表的仅仅是数据而已。这个时候，你拿到数据后，可以随意展示了。假设我猜的没错的话(你的数据是 <option>...</option)，不好意思，你只能用 select 形式来展示了。若是真正的数据，页面我想用啥就用啥展示了，比如，就直接用 input 呀，用 select 呀都行。

嗯嗯,高人,确实是的哦.
如果用json的话,在客户端js是不是还要组装呢?json我没了解过哦.

3 楼 zachary.guo 2010-05-05  

呵呵，了解 ajax 底层请求的若干个状态变化，可以在任意一个状态改变时进行相应的回调处理。底层的细节还是要抽空看看，学习嘛，核心的学会了，就不用局限 jquery 这一个框架了。

同时，看了你的代码：

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

我想，你返回的 data 其实不是真正意义上的 data(数据)，而是穿了衣服的 data(view + data)，即你的 data 可能是这样的 <option>...</option><option>...</option><option>...</option>。

其实呢，作为 ajax 的数据而言，xml 是很少用的了，使用 json 格式更为方便，更为简洁。它代表的仅仅是数据而已。这个时候，你拿到数据后，可以随意展示了。假设我猜的没错的话(你的数据是 <option>...</option)，不好意思，你只能用 select 形式来展示了。若是真正的数据，页面我想用啥就用啥展示了，比如，就直接用 input 呀，用 select 呀都行。

2 楼 化蝶自在飞 2010-05-03  

chemzqm 写道

没有后台代码

后台代码就不需要了吧.areaid带个参数过去,查询出结果来后直接 echo 就ok了.

1 楼 chemzqm 2010-05-03  

没有后台代码