浅谈jQuery使用load(),$.get(), $.post(),$.getJSON(),$.getScript()发起请求Ajax接口的5种方法

1、load()方法 load()方法通过 AJAX 请求从服务器加载数据,并把返回的数据放入被选元素中。 语法:load(url,data,function(response,status,xhr)) 参数描述 url规定要将请求发送到哪...

1、load()方法


load()方法通过 AJAX 请求从服务器加载数据,并把返回的数据放入被选元素中。


语法:load(url,data,function(response,status,xhr))


参数描述

url规定要将请求发送到哪个 URL,也可以把 jQuery 选择器添加到 URL 参数,加载页面某一部分。

data可选。规定连同请求发送到服务器的字符串键/值对集合。

function(response,status,xhr)

可选。规定当请求完成时运行的函数。额外的参数:


response - 包含调用成功时的结果内容

status - 包含调用的状态("success", "notmodified", "error", "timeout" 或 "parsererror")

xhr - 包含 XMLHttpRequest 对象

例1:

$("#div1").load("demo_test.txt",{page : 0, size : 10});

例2:

$("#div1").load("demo_test.txt #p1",page=0&size=10);

例3:

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("responseTxt:"+responseTxt);
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});



2、 $.get()方法


get()方法通过 HTTP GET 请求从服务器上请求数据。


语法:$(selector).get(url,data,success(response,status,xhr),dataType)


参数描述

url必需。规定将请求发送的哪个 URL。

data可选。规定当请求成功时运行的函数。

success(response,status,xhr)

可选。规定当请求成功时运行的函数。额外的参数:


response - 包含来自请求的结果数据

status - 包含请求的状态

xhr - 包含 XMLHttpRequest 对象

dataType

可选。规定预计的服务器响应的数据类型。默认地,jQuery 将智能判断。可能的类型:


"xml"

"html"

"text"

"script"

"json"

"jsonp"

该函数是简写的 Ajax 函数,等价于:

$.ajax({
   url: url,
   data: data,
   success: success,
  dataType: dataType
});

例:  

$.get("test.php", {name:"John", time:"2pm"}, function(data){  
alert("data: " + data);  
}); 


3、$.post()方法


post()方法通过 HTTP POST 请求从服务器上请求数据。


语法:jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)


参数描述

url必需。规定把请求发送到哪个 URL。

data可选。规定当请求成功时运行的函数。

success(response,status,xhr)可选。请求成功时执行的回调函数。

dataType可选。规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script 或 html)。

该函数是简写的 Ajax 函数,等价于:

$.ajax({
   type: 'POST',
  url: url,
  data: data,
   success: success,
 dataType: dataType
});

例1:

$.post("test.php", {name:"John", time:"2pm"}, function(data){
     alert("data: " + data);
});

例2:

$.post("test.php", {name:"John", time:"2pm"}, function(data){
     alert("data: " + data);
}, "xml");

例3:

$.post("test.php", {name:"John", time:"2pm"}, function(data){  
alert("data: " + data);  
});



4、$.getJSON()方法


getJSON()方法通过 HTTP GET 请求载入 JSON 数据。


语法:jQuery.getJSON(url,data,success(data,status,xhr))


参数描述

url必需。规定把请求发送到哪个 URL。

data可选。规定当请求成功时运行的函数。

success(response,status,xhr)可选。请求成功时执行的回调函数。

该函数是简写的 Ajax 函数,等价于:

$.ajax({
   url: url,
   data: data,
   success: callback,
  dataType: json
});

发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象(映射),那么在附加到 URL 之前将转换为字符串,并进行 URL 编码。


传递给 callback 的返回数据,可以是 JavaScript 对象,或以 JSON 结构定义的数组,并使用 $.parseJSON() 方法进行解析。


例:  

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});



5、$.getScript()方法


getScript()方法通过 HTTP GET 请求载入并执行 JavaScript 文件。


语法:jQuery.getScript(url,success(response,status))


参数描述

url将要请求的 URL 字符串。

success(response,status)

可选。规定请求成功后执行的回调函数。额外的参数:


response - 包含来自请求的结果数据

status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")

该函数是简写的 Ajax 函数,等价于:

$.ajax({
url: url,
   dataType: "script",
   success: success
});

这里的回调函数会传入返回的 JavaScript 文件。


载入的脚本在全局环境中执行,因此能够引用其他变量,并使用 jQuery 函数。


例:  

$.getScript("test.js", function(){
alert("Script loaded and executed.");
});

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章