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