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