$.post(),$.ajax(),$.get()和load()

Query对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,
第2层是load(),$.get()和$.post()方法 第三层是$.getScript()和$.getJSON()
方法。首先介绍第二层的方法

载入html文档
load()方法是jquery中最为简单和常用的Ajax方法 能载入远程的HTML代码并
插入DOM中 结构为:
load(url [,data] [,callback])
参数说明:
url 类型String 请求HTML页面的URL地址
data(可选) 类型OBJECT 发送至服务器的Key/value数据
callback(可选) 类型function 请求完成时的回调函数,无论请求成功或失败

[html]  view plain copy
  1. <input type="button" id="send" value="Ajax获取" />  
  2. <div class="comment">已有评论:</div>  
  3. <div id="resText"></div>  
  4. $(function(){  
  5.    $("#send").click(function(){  
  6.      $("#resText").load("test.html");  
  7.    });  
  8. });  

test.html页面里并没有添加样式,但现在家族的内容有样式了,这些样式
是在主页添加的,即住页面相应的样式会理解应用到新加载的内容上。
load()方法的url参数的语法结构是:“url selector”注意,url和选择器之间有一个空格
如果只需要加载test.html页面中的class为"para"的内容,可以使用如下代码完成
$("#resText").load("test.html  .para");
load()方法的传递方式根据参数data来自动指定。如果没有参数传递
则采用get方式传递;反之,则会自动转换为post方式。
//无参数传递,则是get方式
$("#resTest").load("test.php",function(){
  //...
});
//有参数的传递,则是post方式
$("#resTest").load("test.php",{name:"rain",age:"22"},function(){
//...
})
回调参数
对于必须在加载完成后才能继续的操作,load()方法提供了回调函数(callback),该函数
有三个参数,分别代表请求返还的内容,请求状态和XMLHttpRequest对象。jQuery代码如下
$("#resText").load("test.html",function(responseText,testStatus,XMLHttpRequest){
  //responseText:请求返回的内容
  //textStatus:请求状态:success,error,notmodified,timeout 4种
  //XMLHttpRequest:XMLHttpRequest对象
});
在load()方法中,无论Ajax请求是否成功,只要当请求完成(complete)后,回调函数(callback)就
被触发,对应下面将介绍的$.ajax()方法中的complete回调函数

$.get()方法和$.post()方法
$.get(url [,data] [,callback] [,type])
$.get()方法参数解释
url   String 请求的HTML页的URL地址
data  Object  发送至服务器的key/value数据会作为QueryString附加到请求URL中
callback  Function 载入成功时回调函数(只有当Response的返回状态是success才调用
该方法)自动将请求结果和状态传递给该方法
type String 服务器端返回内容的格式 包括xml html script json text default
$.get()方法的回调函数只有两个参数 
function(data,textStatus){
     //data :返回的内容 可以是xml文档,json文件,html片段等等
  //textStatus:请求状态:success,error,notmodified,timeout四种
}
例子:html片段

[html]  view plain copy
  1. $(function(){  
  2.   $("#send").click(function(){  
  3.     $.get("get1.php",{  
  4.     username:$("#username").val(),  
  5.     content:$("#content").val()  
  6.     },function(data,textStatus){  
  7.         $("#resText").html(data);//将返回的数据添加到页面上  
  8.     });  
  9.   })  
  10. });  
  11. xml文档  
  12. $(function(){  
  13.   $("#send").click(function(){  
  14.     $.get("get2.php",{  
  15.     username:$("#username").val(),  
  16.     content:$("#content").val()  
  17.     },function(data,textStatus){  
  18.         var username=$(data).find("comment").attr("username");  
  19.         var  content=$(data).find("comment content").text();  
  20.         var txtHtml="<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";  
  21.         $("#resText").html(textHtml);//将返回的数据添加到页面上  
  22.     });  
  23.   })  
  24. });  
  25.   
  26. JSON文件  
  27. $(function(){  
  28.    $("#send").click(function(){  
  29.      $.get("get3.php",{  
  30.        username:$("#username").val(),  
  31.        content:$("#content").val()  
  32.      },function(data,textStatus){  
  33.          var username=data.username;  
  34.          var content=data.content;  
  35.          var txtHtml="<div class='comment'><h6>"+username+  
  36.          ":</h6><p class='para'>"+content+"</p></div>";  
  37.          $("#resText").html(txtHtml);//将返回的数据添加到页面上  
  38.      },"json");  
  39.    });  
  40.   
  41. });  

在上面的代码中 将$.get()方法的第4个参数(type)设置为"json"来代表期待服务端返回
的数据格式。
$.POST()方法
$(function(){
   $("#send").click(function(){
       $.post("post1.php",{
      username:$("#username").val(),
   content:$("#content").val()
    },function)
   });
}) 

$.ajax()方法是jQuery最底层的Ajax实现
它的结构为:
$.ajax(options)
该方法只有一个参数。但在这个对象里包含了$.ajax()方法所需要的请求设置以及
回调函数等信息。参数以key/value的形式存在 所以参数都是可选的。

前面用到的$.load(),$.get(),$.post(),$.getScript()和$.getJSON()这些方法 都是
基于$.ajax()方法构建的。$.ajax()方法是jQuery最底层的Ajax实现,因此可以替代前
面的所有方法。

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值