jQuery之ajax
一、jQuery.Ajax()
A、设置方式
(1) $.ajax( url[,settings])
(2) $ajax([settings])
$.ajax({
url: 'xxx.php', //请求的接口
type: 'GET', // 类型
data: {// json格式的传递参数
name: 'Byron',
age: 24,
sex: 'Male'
},
dataType: 'json' //会自动解析json格式
}).done(function(result){
//.done 请求成功
console.log(result);
}).fail(function(jqXHR, textStatus){
//.fail 请求失败
consloe.log(textStatus);
});
这样子,发送了一个get 请求
B、常用参数
(1) async:默认设置下,所有请求均为异步请求(也就是说这是默认设置为 true )。如果需要发送同步请求,请将此选项设置为 false
(1) beforeSend:请求发送前的回调函数,用来修改请求发送前jqXHR对象,此功能用来设置自定义 HTTP 头信息,等等。该jqXHR和设置对象作为参数传递
(2) cache:如果设置为 false ,浏览器将不缓存此页面。注意: 设置cache为 false将在 HEAD和GET请求中正常工作。它的工作原理是在GET请求参数中附加"_={timestamp}"
(3) context:这个对象用于设置Ajax 相关回调函数的上下文。 默认情况下,这个上下文是一个ajax请求使用的参数设置对象
(4) data:发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后面,POST请求作为表单数据
(5) headers:一个额外的 {键:值} 对映射到请求一起发送。此设置会在beforeSend 函数调用之前被设置 ;因此,请求头中的设置值,会被beforeSend 函数内的设置覆盖
(6) method:HTTP 请求方法 (比如:"POST", "GET ", "PUT",1.9之前使用“type”)
使用jQuery处理ajax请求,其实挺简单,比如
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
二、jQuery.get() | jQuery.post()
A、设置方式
(1) $.get(url [,data][,success] [,dataType])
(2)$.get([settings])
在默认是GET,dataType是 Json, 且没有data情况下,发送一个简单请求,得到数据
$.get('http://api.jirengu.com/fm/getChannels.php')
.done(function(channelInfo){
console.log(channelInfo)
});
![](https://img.haomeiwen.com/i14339384/702f94d07f443c0a.png)
B、实例
(1) 请求test.php页面,但忽略返回结果。
`$.get( "test.php" );`
(2) 请求test.php页面并发送一些其他数据(同时仍然忽略返回结果)。
`$.get( "test.php", { name: "John", time: "2pm" } );`
(3) 将数据数组传递给服务器(同时仍然忽略返回结果)。
`$.get( "test.php", { "choices[]": ["Jon", "Susan"] } );`
(4) 请求test.php(HTML或XML,具体取决于返回的内容)的结果。
`$.get( "test.php", function( data ) { alert( "Data Loaded: " + data );});`
(5) 通过额外的数据有效负载(HTML或XML,取决于返回的内容)来请求test.cgi的结果。
`$.get( "test.cgi", { name: "John", time: "2pm" } ) .done(function( data ) { alert( "Data Loaded: " + data ); });`
(6) 获取以json格式返回的test.php页面内容(<?php echo json_encode(array(“name”=>“John”,“time”=>“2pm”));?>),并添加它到页面。
`$.get( "test.php", function( data ) { $( "body" ) .append( "Name: " + data.name ) // John .append( "Time: " + data.time ); // 2pm}, "json" );`
C、处理 get 和 post 请求的方法
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
//dataType:从服务器返回的预期的数据类型。默认:智能猜测(xml, json, script, 或 html)
三、jQuery.getJSON( url [, data ][, success(data, textStatus, jqXHR) ] )
使用一个HTTP GET请求从服务器加载JSON编码的数据,这是一个Ajax函数的缩写,这相当于:
$.ajax({
dataType: "json",
url: url,
data: data,
success: success
});