-
$.ajax
jQuery.ajax( [settings ] )
$.ajax({
url: 'xxx.php',
method: 'GET',
data: {
name: 'Byron',
age: 24,
sex: 'Male'
}
}).done(function(result){
console.log(result);
}).fail(function(jqXHR, textStatus){
consloe.log(textStatus);
});
這樣我們就發(fā)送了一個(gè)get請(qǐng)求
方法提供了幾個(gè)常用的setting
async:默認(rèn)設(shè)置下,所有請(qǐng)求均為異步請(qǐng)求(也就是說這是默認(rèn)設(shè)置為 true )哭靖。如果需要發(fā)送同步請(qǐng)求具垫,請(qǐng)將此選項(xiàng)設(shè)置為 false
beforeSend:請(qǐng)求發(fā)送前的回調(diào)函數(shù),用來修改請(qǐng)求發(fā)送前jqXHR對(duì)象试幽,此功能用來設(shè)置自定義 HTTP 頭信息筝蚕,等等。該jqXHR和設(shè)置對(duì)象作為參數(shù)傳遞
cache:如果設(shè)置為 false 铺坞,瀏覽器將不緩存此頁(yè)面起宽。注意: 設(shè)置cache為 false將在 HEAD和GET請(qǐng)求中正常工作。它的工作原理是在GET請(qǐng)求參數(shù)中附加"_={timestamp}"
context:這個(gè)對(duì)象用于設(shè)置Ajax相關(guān)回調(diào)函數(shù)的上下文济榨。 默認(rèn)情況下坯沪,這個(gè)上下文是一個(gè)ajax請(qǐng)求使用的參數(shù)設(shè)置對(duì)象
data:發(fā)送到服務(wù)器的數(shù)據(jù)。將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式擒滑。GET 請(qǐng)求中將附加在 URL 后面腐晾,POST請(qǐng)求作為表單數(shù)據(jù)
headers:一個(gè)額外的{鍵:值}對(duì)映射到請(qǐng)求一起發(fā)送叉弦。此設(shè)置會(huì)在beforeSend 函數(shù)調(diào)用之前被設(shè)置 ;因此,請(qǐng)求頭中的設(shè)置值藻糖,會(huì)被beforeSend 函數(shù)內(nèi)的設(shè)置覆蓋
method:HTTP 請(qǐng)求方法 (比如:"POST", "GET ", "PUT"淹冰,1.9之前使用“type”)
了解了這些參數(shù),使用jQuery處理ajax請(qǐng)求就簡(jiǎn)單了
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
除了這個(gè)方法巨柒,jQuery還提供了一些額外的方法
-
$.get
jQuery.get( [settings] ) / jQuery.post( [settings ] )
這兩個(gè)方法專門用來處理get和post請(qǐng)求
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
簡(jiǎn)單示例
$.get('/ajax.json').done(function(ret){
console.log(ret)
})
顯示結(jié)果:
-
$.getJSON
jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )
使用一個(gè)HTTP GET請(qǐng)求從服務(wù)器加載JSON編碼的數(shù)據(jù)榄棵,這是一個(gè)Ajax函數(shù)的縮寫,這相當(dāng)于:
$.ajax({
dataType: "json",
url: url,
data: data,
success: success
});
示例:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$.getJSON("/ajax.json",function(result){
$.each(result, function(i, field){
$("p").append(field + " ");
});
});
});
});
</script>
</head>
<body>
<button>獲得 JSON 數(shù)據(jù)</button>
<p></p>
</body>