关于jQuery中的ajax的方法介绍

时间:2022-03-06 23:31:01
       jQuery提供一系列Ajax函数方便我们调用Ajax, 其中最核心也是最复杂的是jQuery.ajax(),所有的其他Ajax函数都是它的一个简化调用.当我们想要完全控制Ajax时可以使用此结果, 否则还是使用简化方法如get, pos等更加方便. 所以jQuery.ajax(  ) 方法放到最后一个介绍, 先来介绍上层简单方法,值得注意的是Ajax方法必须要在服务器上运行。
 
 
1、$(parent).load( url [, data] [, callback]); 

请求一个HTML页面,并替换为parent的innerHTML

 
例子:
 $(function (){
$("input").click(function (){
var index=$(this).index();
$("div").eq(index).load("h/a"+(index+1)+".html",function (){
$("div").hide();
$("div").eq(index).show();
});
});
});
 
2、$.get( url [, data] [, callback] [, type]);
get方式请求指定的url。
不用解析,变成json对象,直接可用。
 
 $(function (){
$.get("h/login2.php",{
user:"wangyue",
pass:"12345"
},function (str){
alert(str);
});
});
 
3、post的方式获取请求
 $.post("h/login3.php",{user:"wangyue",pass:"12345"},function (data){
console.log(data);
// alert(data.pan.age);
});
 

4、$.getScript(url [, callback]);

加载一段JS并执行

 $.getScript("h/getJs.js",function (data){
alert(data); //弹的是js文件里的内容
});
 
5、$.getJSON(url [, callback]);
加载一段JSON并解析
 $.getJSON('h/index.json', function(json, textStatus) {
console.log(json);
// alert(textStatus);
});
 
 
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 : 失败的回调函数

 $.ajax({
url:"h/login2.php", //url
type:"get", //默认get post
data:{
user:"wangyue", //发送该服务器的数据 接受的是json类型
pass:"12345"
},
dataType:"json", //数据类型 jsonp json html txt ;不加这属性返回的是字符串,加了能够与解析,返回的是对象
success:function (data){ //成功后回调函数
// alert(data);
console.log(data);
},
error:function (){
alert('失败了');
}
});
 
 
 
 $.ajax({
url:"http://suggestion.baidu.com/su",
data:{
wd:"x"
},
dataType:"jsonp",
jsonp:"cb", //回调函数的名字
success:function (data){ console.log(data);
},
error:function (){
alert("失败了");
}
});