在使用原生Ajax發送一個請求時,過程多少有點繁瑣,jQuery中對於Ajax請求有它自己的封裝好的函數,使用起來分方便。
在jQuery中有專門的Ajax封裝,具體參照JQuery-Ajax參考手冊網址
這里用一段練習代碼展示下使用方法:
//使用要引入jQuery文件 <script src="../jq/jquery-1.12.4.min.js"></script>
$.ajax({
url:"http://localhost:3000/users",
type:"get",
dataType:"json",
data:{"id":3},
beforeSend:function(xhr){
console.log("before send");
},
success:function(data){
console.log(data);
},
error:function(){
console.log("請求error");
},
complete:function(xhr){
console.log("complete");
console.log(xhr);
}
})
關於jQuery中$.ajax() 的幾個參數介紹:
-
url:請求地址;
-
type:請求方法,默認為”get";
-
dataType:服務端響應數據類型;
-
contentType:請求體內容的類型,默認“application/x-www-form-urlencode”;
-
data:需要傳輸到服務器的數據,如果是get則通過、url傳遞;post則通過請求體傳遞;
-
timeout:請求超時時間;
-
beforeSend:請求發起之前觸發;
-
success:請求成功之后觸發(響應狀態碼200);
-
error:請求失敗觸發;
-
complete:請求完成后觸發(不管成功與否)
jQuery中其他請求:
-
$.get(),獲取數據
jQuery中get請求快捷方法:$.get(url,data,callback回調函數,返回的數據格式datatype);
//發送 get請求 $.get("http://localhost:3000/liuyan",{"content":"hi"}, function(data){ console.log(data); });
-
$.post,添加數據
$.post(url,data,callback)
//發送post請求 $.post(url,data,callback,datatype) $.post("http://localhost:3000/liuyan",{"content":"ajax","userId":1}, function(data){ console.log(data); })
-
$.put,更改數據
//put 請求 $.ajax({ url:"http://localhost:3000/liuyan/5",//需要在地址上標出改的主鍵 type:"put", dataType:"json", data:{"content":"put 請求啊"},//改的內容 success:function(data){ console.log(data) } })
-
$delete,刪除數據
//刪除數據 delete請求 $.ajax({ url:"http://localhost:3000/liuyan/6", type:"delete", success:function(data){ console.log(data); } })
//刪除數據 delete請求 $.ajax({ url:"http://localhost:3000/liuyan/6", type:"delete", success:function(data){ console.log(data); } })
-
$.ajaxSetup() 方法設置全局 AJAX 默認選項。
$.ajaxSetup({ url:"https://localhost:3000", type:post }); $.ajax({ data:{"name":"value"} });
-
等等還有很多方法,可以參考jquery-Ajax手冊。