jQuery提供一系列Ajax函数方便我们调用Ajax,
其中最核心也是最复杂的是jQuery.ajax(),所有的其他Ajax函数都是它的一个简化调用.当我们想要完全控制Ajax时可以使用此结果,
否则还是使用简化方法如get, pos等更加方便. 所以jQuery.ajax( ) 方法放到最后一个介绍,
先来介绍上层简单方法,值得注意的是Ajax方法必须要在服务器上运行。
1、$(parent).load( url [, data] [, callback]);
请求一个HTML页面,并替换为parent的innerHTML
例子:
1 $(function (){ 2 $("input").click(function (){ 3 var index=$(this).index(); 4 $("div").eq(index).load("h/a"+(index+1)+".html",function (){ 5 $("div").hide(); 6 $("div").eq(index).show(); 7 }); 8 }); 9 });
2、$.get( url [, data] [, callback] [, type]);
get方式请求指定的url。
不用解析,变成json对象,直接可用。
1 $(function (){ 2 $.get("h/login2.php",{ 3 user:"wangyue", 4 pass:"12345" 5 },function (str){ 6 alert(str); 7 }); 8 });
3、post的方式获取请求
1 $.post("h/login3.php",{user:"wangyue",pass:"12345"},function (data){ 2 console.log(data); 3 // alert(data.pan.age); 4 });
4、$.getScript(url [, callback]);
加载一段JS并执行
1 $.getScript("h/getJs.js",function (data){ 2 alert(data); //弹的是js文件里的内容 3 });
5、$.getJSON(url [, callback]);
加载一段JSON并解析
1 $.getJSON(‘h/index.json‘, function(json, textStatus) { 2 console.log(json); 3 // alert(textStatus); 4 });
6、最基础---$.ajax( options
);
url:发送请求的URL
type :
"get"或"post"
success: 请求成功后的回调函数
data 示例:"name=abc&age=19"或
{name:"abc",age:19}
timeout :
超时时间(毫秒)
dataType
:服务器返回的数据类型。特殊的格式JQ会进行预解析和兼容性修复。可选择的值:"xml" , "html" , "script" , "json" ,
"jsonp","text"
beforeSend :在发送请求前,可以添加自定义头部信息等操作。示例:
function(xhr){ xhr;//XMLHttpRequest对象}
complete:ajax请求完成后的回调函数,无论成功与失败。
error : 失败的回调函数
1 $.ajax({ 2 url:"h/login2.php", //url 3 type:"get", //默认get post 4 data:{ 5 user:"wangyue", //发送该服务器的数据 接受的是json类型 6 pass:"12345" 7 }, 8 dataType:"json", //数据类型 jsonp json html txt ;不加这属性返回的是字符串,加了能够与解析,返回的是对象 9 success:function (data){ //成功后回调函数 10 // alert(data); 11 console.log(data); 12 }, 13 error:function (){ 14 alert(‘失败了‘); 15 } 16 });
1 $.ajax({ 2 url:"http://suggestion.baidu.com/su", 3 data:{ 4 wd:"x" 5 }, 6 dataType:"jsonp", 7 jsonp:"cb", //回调函数的名字 8 success:function (data){ 9 10 console.log(data); 11 }, 12 error:function (){ 13 alert("失败了"); 14 } 15 });