2018-10-15 seo達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
jQuery對(duì)Ajax操作進(jìn)行了封裝，常用的方法包括 $.get(),$.post(),$.ajax()。
分別對(duì)其進(jìn)行介紹
$.get()
$.get()方法使用GET方式來(lái)進(jìn)行異步請(qǐng)求。
$.get()結(jié)構(gòu)
$.get(url,[. data][. callback][. type])
1
$.get()方法參數(shù)解釋
參數(shù)名稱(chēng) 類(lèi)型 說(shuō)明
url String 請(qǐng)求的HTML頁(yè)的url地址
data(可選) Object 發(fā)送至服務(wù)器的key/value數(shù)據(jù)會(huì)作為QueryString附加到請(qǐng)求的url中
callback(可選) Function 載入成功時(shí)回調(diào)函數(shù)（只有當(dāng)Response的返回狀態(tài)是success才調(diào)用該方法）自動(dòng)將請(qǐng)求結(jié)果和狀態(tài)傳遞給該方法
type(可選) String 服務(wù)器端返回內(nèi)容的格式，包括xml、html、script、json、text和_default
示例
json數(shù)據(jù)：data.json(后面的$.post()和$.ajax()方法都用這個(gè)數(shù)據(jù))
{
"name":"龍貓",
"hobby":"睡覺(jué)",
"friend":"加菲貓"
}
jq_get.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="$.get方法" id="jQget">
<div id="content"></div>
</body>
</html>
<!-- 導(dǎo)入jquery.js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#jQget').on('click',function(){
/*
參數(shù)1:url
參數(shù)2:發(fā)送的數(shù)據(jù) 支持 直接寫(xiě)js對(duì)象的方式
參數(shù)3:回調(diào)函數(shù)
參數(shù)4:從服務(wù)端獲取的 數(shù)據(jù)類(lèi)型 可以不寫(xiě)
注意
如果type 為json
并且服務(wù)端返回的就是 json格式字符串
jq內(nèi)部 會(huì)幫助我們自動(dòng)轉(zhuǎn)化
在回調(diào)函數(shù)中 獲取的 實(shí)參 就是轉(zhuǎn)化完成的 js對(duì)象 直接使用即可
參數(shù)的 順序 是更換的
但是 如果 把data 放到后面 會(huì)出現(xiàn) 無(wú)法傳遞數(shù)據(jù)的問(wèn)題,
所以 不要擅自更換 嚴(yán)格按照 jq文檔中的 順序 進(jìn)行使用
*/
$.get('jq_get.php',{name:"jack",age:18},function(data){
console.log(data);
$('#content').html('name:'+data.name+'<br>'+'hobby:'+data.hobby+'<br>'+'friend:'+data.friend);
},'json');
});
});
</script>
jq_get.php (后面的$.post()和$.ajax()方法都用這個(gè)頁(yè)面的內(nèi)容，只是在html請(qǐng)求時(shí)分別對(duì)應(yīng)的php頁(yè)面)
<?php
header('content-type:text/html;charset=utf-8');
echo file_get_contents('datas/data.json');
?>
結(jié)果展示：
$.post()方法
它與$.get()方法的結(jié)構(gòu)和使用方式都相同，不過(guò)它們之間仍然有以下區(qū)別：
GET請(qǐng)求會(huì)將參數(shù)跟在URL后進(jìn)行傳遞，而POST請(qǐng)求則是作為HTTP消息的實(shí)體內(nèi)容發(fā)送個(gè)Web服務(wù)器，當(dāng)然，在Ajax中，這種區(qū)別對(duì)用戶是不可見(jiàn)的。
GET方式對(duì)傳輸?shù)臄?shù)據(jù)有大小限制（通常不能大于2KB），而使用POST方式傳遞的數(shù)據(jù)量要比GET方式大得多（理論上不受限制，但是可以在服務(wù)端進(jìn)行限制）。
GET方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存起來(lái)，因此其他人就可以從瀏覽器的歷史記錄中讀取這些數(shù)據(jù)，例如賬號(hào)和密碼等。在某種情況下，GET方式會(huì)帶來(lái)嚴(yán)重的安全性問(wèn)題，而POST方式相對(duì)來(lái)說(shuō)就可以避免這些問(wèn)題。（但是也是不安全的，所以密碼之類(lèi)的還是要加密的）
GET方式和POST方式傳遞的數(shù)據(jù)在服務(wù)器的獲取方式也不相同。在PHP中，GET方式數(shù)據(jù)可以用$_GET[]獲取，而POST可以用$_POST[]獲取、兩種方式都可以用$_REQUEST[]來(lái)獲取。
其實(shí)這完全是對(duì)這篇文章中post()和get()方法不同的總結(jié)啊！(點(diǎn)擊查看)
$.post()演示
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#jQpost').on('click',function(){
// 跟$.get用法及其類(lèi)似
/*
參數(shù)1:url
參數(shù)2:發(fā)送的數(shù)據(jù) 支持 直接寫(xiě)js對(duì)象的方式
參數(shù)3:回調(diào)函數(shù)
參數(shù)4:從服務(wù)端獲取的 數(shù)據(jù)類(lèi)型 可以不寫(xiě),如果寫(xiě)為json jq內(nèi)部 會(huì)幫我們進(jìn)行一個(gè) JSON.parse()的轉(zhuǎn)化
*/
$.post('jq_post.php',{name:"kong",age:18},function(data){
console.log(data);
},'json');
});
});
</script>
$.ajax()
$.ajax()方法是jQuery最底層的Ajax實(shí)現(xiàn)
其結(jié)構(gòu)為
$.ajax(options)
1
該方法只有1個(gè)參數(shù)，但在這個(gè)對(duì)象里包含了$.ajax()方法所需要的請(qǐng)求設(shè)置以及回調(diào)函數(shù)等信息，參數(shù)以key/value的形式存在，所有參數(shù)都是可選的，只寫(xiě)幾個(gè)常用的參數(shù)，如下：
參數(shù)名稱(chēng) 類(lèi)型 說(shuō)明
url String 請(qǐng)求的HTML頁(yè)的url地址
type String 請(qǐng)求方式，默認(rèn)GET。注意其他的HTTP請(qǐng)求方法，例如PUT和DELETE也可以使用，但僅部分瀏覽器支持
data Object或String 發(fā)送到服務(wù)器的數(shù)據(jù)，如果已經(jīng)不是字符串，將自動(dòng)轉(zhuǎn)換為字符串格式。
dataType String 服務(wù)器端返回內(nèi)容的格式，包括xml、html、script、json、jsonp 、jQuery
beforeSend Function 發(fā)送請(qǐng)求前可以修改XMLHttpRequest對(duì)象的函數(shù)，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次Ajax請(qǐng)求。XMLHttpRequest對(duì)象的唯一參數(shù)。
success Function 請(qǐng)求成功后嗲用的回調(diào)函數(shù)，有兩個(gè)參數(shù)。
(1)由服務(wù)器返回，并根據(jù)dataType參數(shù)進(jìn)行處理后的數(shù)據(jù)。
(2)描述狀態(tài)的字符串。
function(data,textStatus){
//data可能是xmlDoc、jsonObj、html、text等等。
this//調(diào)用本次Ajax請(qǐng)求時(shí)傳遞的options參數(shù)
}
error Function 請(qǐng)求失敗時(shí)被調(diào)用的函數(shù)，該函數(shù)有3個(gè)參數(shù)，即
XMLHttpRequest對(duì)象、錯(cuò)誤信息、捕獲的錯(cuò)誤對(duì)象(可選)。
Ajax事件函數(shù)如下。
function(XMLHttpRequest,textStatus,errorThrown){//通常情況下textStatus和errorThown只有其中一個(gè)包含信息
this;//調(diào)用本次Ajax請(qǐng)求時(shí)傳遞的options參數(shù)
}
示例
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#jqAjax').on('click',function(){
/*
常見(jiàn)參數(shù):
url:請(qǐng)求的地址
success:請(qǐng)求成功的回調(diào)函數(shù)
type:不寫(xiě)是get 可以指定 get,post
dataType:數(shù)據(jù)的類(lèi)型
data:發(fā)數(shù)據(jù) 可以寫(xiě)js對(duì)象
beforeSend:發(fā)送之前調(diào)用的匿名函數(shù)
可以return false 阻止該次請(qǐng)求
驗(yàn)證用戶的數(shù)據(jù) 是否填了
error:請(qǐng)求失敗以后 會(huì)調(diào)用
*/
$.ajax({
url:'jq_ajax.php',
success:function(data){
console.log(data);
$('#box').append(data.name+'<br>'+data.hobby);
},
type:'post',
dataType:'json',
data:{"name":"張信哲","skill":"情歌王子"},
beforeSend:function(){
console.log('發(fā)送之前調(diào)用');
},
error:function(){
console.log('請(qǐng)求失敗了');
}
});
});
});
</script>
---------------------
作者：diligentkong
來(lái)源：CSDN
原文：https://blog.csdn.net/diligentkong/article/details/72851443
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請(qǐng)附上博文鏈接！
藍(lán)藍(lán)設(shè)計(jì)( m.gyxygd.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.gyxygd.cn