乌徒帮技术范技术中心Ajax › jquery中的ajax基本方法

jquery中的ajax基本方法

分类:Ajax,jQuery

jquery.ajax()操作方法让ajax实现非常简单,你可以更专注的去完成相关操作,而非去研究ajax到底怎么回事。

上面的链接中,官方给出了详细的使用方法,本文给出最简单的操作例子:

$('a#more').live('click',function($e){
$e.preventDefault();//点击链接时阻止进行网页跳转
$.ajax({//当点击时触发ajax
type: "GET",//这个跟提交表单的get,post是一个道理,当我们提交表单时往往需要注意
url: $(this).attr('href'),//提交到哪个页面
dataType: "json",//数据传输的格式,这里提交数据之后,将返回json格式的数据
data:{page:$(this).attr('role')},//提交什么数据
beforeSend : function(){},//在发送数据之前执行这里的函数
success: function($out){//如果整个交互成功,将接收到返回数据$out,当然,如果我们访问的是一个页面的话,$out将是HTML代码
$result = $out.html;//由于是JSON,我们直接获取返回的数据
$("#home").html($result);//在本页的#home中用得到的返回数据代替现在的数据
$('html,body').animate({scrollTop: 0},800);//这段是附加代码,不是ajax的内容,表示将页面滚动到顶部
},
complete: function(){},//当ajax动作执行完毕后执行该处,无论是否成功
error: function(){}//如果出错,执行这里
});
});

上面是最基本的一种方法,你可以跟着官方的一些详解,自己尝试,乌徒帮首页的翻页效果就是用ajax实现的。你可以尝试把玩。

填写个人信息,赶快回复吧!