关于jQuery中的ajax的方法介绍

       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 });

View Code

 

 

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 });

View Code

 

 

3、post的方式获取请求

1 $.post("h/login3.php",{user:"wangyue",pass:"12345"},function (data){

2 console.log(data);

3 // alert(data.pan.age);

4 });

View Code

 

 

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

加载一段JS并执行

1 $.getScript("h/getJs.js",function (data){

2 alert(data); //弹的是js文件里的内容

3 });

View Code

 

 

5、$.getJSON(url [, callback]);

加载一段JSON并解析

1 $.getJSON('h/index.json', function(json, textStatus) {

2 console.log(json);

3 // alert(textStatus);

4 });

View Code

 

 

 

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 });

View Code

 

 

 

 

 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 });

View Code