首頁技術(shù)文章正文

jQuery中怎樣發(fā)起Ajax請求?

更新時間:2022-11-08 來源:黑馬程序員 瀏覽量:

Ajax的全稱是 Asynchronous Javascript And XML(異步 JavaScript 和 XML)。在網(wǎng)頁中它可以幫我們輕松實現(xiàn)網(wǎng)頁與服務(wù)器之間的連接。利用 XMLHttpRequest 對象和服務(wù)器進行數(shù)據(jù)交互。

瀏覽器中提供的 XMLHttpRequest 用法比較復雜,所以 jQuery 對 XMLHttpRequest 進行了封裝,提供了一系列 Ajax 相關(guān)的函數(shù),極大地降低了 Ajax 的使用難度。jQuery 中發(fā)起 Ajax 請求最常用的三個方法如下:

  ?$.get()

  ?$.post()

  ?$.ajax()

1.$.ajax()函數(shù)的語法

jQuery 中 $.get() 函數(shù)的功能單一,專門用來發(fā)起 get 請求,從而將服務(wù)器上的資源請求到客戶端來進行使用。$.get() 函數(shù)的語法如下:

$.get(url, [data], [callback])

其中,三個參數(shù)各自代表的含義如下表:

參數(shù)代表的含義

使用 $.get() 函數(shù)發(fā)起不帶參數(shù)的請求時,直接提供請求的 URL 地址和請求成功之后的回調(diào)函數(shù)即可,示例代碼如下:

$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
    console.log(res) // 這里的 res 是服務(wù)器返回的數(shù)據(jù)
})

發(fā)起請求后,查看頁面的網(wǎng)頁源代碼,Network頁的顯示如下圖:

生成的network

使用 $.get() 函數(shù)發(fā)起帶參數(shù)的請求時,示例代碼如下:

$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function(res) {
    console.log(res)
})

發(fā)起請求后,查看頁面的網(wǎng)頁源代碼,Network頁的顯示如下:
網(wǎng)頁源代碼

2.$.post()

jQuery 中 $.post() 函數(shù)的功能單一,專門用來發(fā)起 post 請求,從而向服務(wù)器提交數(shù)據(jù)。$.post() 函數(shù)的語法如下:

$.post(url, [data], [callback])

其中,三個參數(shù)各自代表的含義如下:

1667894664290_62.png

使用 $post() 向服務(wù)器提交數(shù)據(jù)的示例代碼如下:

$.post(
   'http://www.liulongbin.top:3006/api/addbook', // 請求的URL地址
   { bookname: '水滸傳', author: '施耐庵', publisher: '上海圖書出版社' }, // 提交的數(shù)據(jù)
   function(res) { // 回調(diào)函數(shù)
      console.log(res)
   }
)

同樣可以看到,發(fā)起請求后網(wǎng)頁源代碼中,文件成功加載:

1667894762510_圖片3.png

3.$.ajax()函數(shù)的語法

相比于 $.get() 和 $.post() 函數(shù),jQuery 中提供的 $.ajax() 函數(shù),是一個功能比較綜合的函數(shù),它允許我們對 Ajax 請求進行更詳細的配置。$.ajax() 函數(shù)的基本語法如下:

$.ajax({
   type: '', // 請求的方式,例如 GET 或 POST
   url: '',  // 請求的 URL 地址
   data: { },// 這次請求要攜帶的數(shù)據(jù)
   success: function(res) { } // 請求成功之后的回調(diào)函數(shù)
})

使用 $.ajax() 發(fā)起 GET 請求時,只需要將 type 屬性的值設(shè)置為 'GET' 即可:

$.ajax({
   type: 'GET', // 請求的方式
   url: 'http://www.liulongbin.top:3006/api/getbooks',  // 請求的 URL 地址
   data: { id: 1 },// 這次請求要攜帶的數(shù)據(jù)
   success: function(res) { // 請求成功之后的回調(diào)函數(shù)
       console.log(res)
   }
})

使用 $.ajax() 發(fā)起 POST 請求時,只需要將 type 屬性的值設(shè)置為 'POST'。

$.ajax({
   type: 'POST', // 請求的方式
   url: 'http://www.liulongbin.top:3006/api/addbook',  // 請求的 URL 地址
   data: { // 要提交給服務(wù)器的數(shù)據(jù)
      bookname: '水滸傳',
      author: '施耐庵',
      publisher: '上海圖書出版社'
    },
   success: function(res) { // 請求成功之后的回調(diào)函數(shù)
       console.log(res)
   }
})


分享到:
在線咨詢 我要報名
和我們在線交談!