更新時(shí)間:2022-11-08 來源:黑馬程序員 瀏覽量:
Ajax的全稱是 Asynchronous Javascript And XML(異步 JavaScript 和 XML)。在網(wǎng)頁(yè)中它可以幫我們輕松實(shí)現(xiàn)網(wǎng)頁(yè)與服務(wù)器之間的連接。利用 XMLHttpRequest 對(duì)象和服務(wù)器進(jìn)行數(shù)據(jù)交互。
瀏覽器中提供的 XMLHttpRequest 用法比較復(fù)雜,所以 jQuery 對(duì) XMLHttpRequest 進(jìn)行了封裝,提供了一系列 Ajax
相關(guān)的函數(shù),極大地降低了 Ajax 的使用難度。jQuery 中發(fā)起 Ajax 請(qǐng)求最常用的三個(gè)方法如下:
?$.get()
?$.post()
?$.ajax()
jQuery 中 $.get() 函數(shù)的功能單一,專門用來發(fā)起 get 請(qǐng)求,從而將服務(wù)器上的資源請(qǐng)求到客戶端來進(jìn)行使用。$.get()
函數(shù)的語法如下:
$.get(url, [data], [callback])
其中,三個(gè)參數(shù)各自代表的含義如下表:
使用 $.get() 函數(shù)發(fā)起不帶參數(shù)的請(qǐng)求時(shí),直接提供請(qǐng)求的 URL 地址和請(qǐng)求成功之后的回調(diào)函數(shù)即可,示例代碼如下:
$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) { console.log(res) // 這里的 res 是服務(wù)器返回的數(shù)據(jù) })
發(fā)起請(qǐng)求后,查看頁(yè)面的網(wǎng)頁(yè)源代碼,Network頁(yè)的顯示如下圖:
使用 $.get() 函數(shù)發(fā)起帶參數(shù)的請(qǐng)求時(shí),示例代碼如下:
$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function(res) { console.log(res) })
發(fā)起請(qǐng)求后,查看頁(yè)面的網(wǎng)頁(yè)源代碼,Network頁(yè)的顯示如下:
jQuery 中 $.post() 函數(shù)的功能單一,專門用來發(fā)起 post 請(qǐng)求,從而向服務(wù)器提交數(shù)據(jù)。$.post() 函數(shù)的語法如下:
$.post(url, [data], [callback])
其中,三個(gè)參數(shù)各自代表的含義如下:
使用 $post() 向服務(wù)器提交數(shù)據(jù)的示例代碼如下:
$.post( 'http://www.liulongbin.top:3006/api/addbook', // 請(qǐng)求的URL地址 { bookname: '水滸傳', author: '施耐庵', publisher: '上海圖書出版社' }, // 提交的數(shù)據(jù) function(res) { // 回調(diào)函數(shù) console.log(res) } )
同樣可以看到,發(fā)起請(qǐng)求后網(wǎng)頁(yè)源代碼中,文件成功加載:
相比于 $.get() 和 $.post() 函數(shù),jQuery 中提供的 $.ajax() 函數(shù),是一個(gè)功能比較綜合的函數(shù),它允許我們對(duì) Ajax 請(qǐng)求進(jìn)行更詳細(xì)的配置。$.ajax() 函數(shù)的基本語法如下:
$.ajax({ type: '', // 請(qǐng)求的方式,例如 GET 或 POST url: '', // 請(qǐng)求的 URL 地址 data: { },// 這次請(qǐng)求要攜帶的數(shù)據(jù) success: function(res) { } // 請(qǐng)求成功之后的回調(diào)函數(shù) })
使用 $.ajax() 發(fā)起 GET 請(qǐng)求時(shí),只需要將 type 屬性的值設(shè)置為 'GET' 即可:
$.ajax({ type: 'GET', // 請(qǐng)求的方式 url: 'http://www.liulongbin.top:3006/api/getbooks', // 請(qǐng)求的 URL 地址 data: { id: 1 },// 這次請(qǐng)求要攜帶的數(shù)據(jù) success: function(res) { // 請(qǐng)求成功之后的回調(diào)函數(shù) console.log(res) } })
使用 $.ajax() 發(fā)起 POST 請(qǐng)求時(shí),只需要將 type 屬性的值設(shè)置為 'POST'。
$.ajax({ type: 'POST', // 請(qǐng)求的方式 url: 'http://www.liulongbin.top:3006/api/addbook', // 請(qǐng)求的 URL 地址 data: { // 要提交給服務(wù)器的數(shù)據(jù) bookname: '水滸傳', author: '施耐庵', publisher: '上海圖書出版社' }, success: function(res) { // 請(qǐng)求成功之后的回調(diào)函數(shù) console.log(res) } })