基於jQuery的三種AJAX請求

小牛碼發表於2022-12-31
jQuery

基於jQuery的三種AJAX請求

1. 介紹

  • get請求 通常用於 獲取服務端資源（向伺服器要資源）

​ 例如：根據URL地址，從伺服器獲取HTML檔案、CSS檔案、JS檔案、圖片檔案、資料資源等。

  • post請求 通常用於 向伺服器提交資料（往伺服器傳送資源）

​ 例如：登入時向伺服器提交的登入資訊、註冊是向伺服器提交的註冊資訊、新增使用者時向伺服器提交的使用者資訊等各種資料提交操作。

  • ajax請求 就比較綜合，既可以傳送 get請求 也可以傳送 post請求

2. 用法

2.1. get請求

語法：

$.get(url, [data], [callback]);  // 帶有中括號的參數列示可以省略

引數介紹：

引數名 是否可省略 引數型別 引數作用
url 不可省略 string 規定你請求的url
data 可省略 object 請求資源期間要攜帶的引數
callback 可省略 function 請求成功後所執行的函式名

案例：

 // 傳送get請求，請求 bookname 為 '西遊記' 的資料
 $.get('http://www.liulongbin.top:3006/api/getbooks', { bookname: '西遊記' }, function (res) {
   console.log(res);  // res 是伺服器返回的資料
})

2.2. post請求

語法：

$.post(url, [data], [callback]);  // 帶有中括號的參數列示可以省略

引數介紹：

引數名 是否可省略 引數型別 引數作用
url 不可省略 string 規定你請求的url
data 可省略 object 要提交的資料
callback 可省略 function 請求成功後所執行的函式名

案例：

// 定義url
let url = 'http://www.liulongbin.top:3006/api/addbooks'  
// 定義data資料
let data = {
  bookname: '富婆成長計',
  author: 'tuoni',
  publisher: '廣東出版社'
}
// post請求
$.post(url, data, function (res) {
  console.log(res);
})

2.3. ajax請求

語法以及引數：

$.ajax({
  type: '',  // 請求的方式，例如 'GET' 或 'POST'
  url: '',  // 請求的URL地址
  data: {},  // 這次請求要攜帶的資料
  success： function(res) {}  // 請求成功之後的回撥函式
})

相關文章