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