浅谈jQuery Ajax的5种方法

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

你可能感兴趣的:(Ajax,jQuery)