進入ajax了，想要進入vue還有一個前提就是要把ajax給熟悉一下，看一看客戶端與伺服器之間是怎麼一個通信的過程，第一天主要是先瞭解了一下ajax的一些介紹，ajax嘛，在進入之前，肯定是要瞭解一下客戶端與伺服器之間的一個通信過程，其實不管是請求還是發送都遵循的一個原則，即請求、處理、響應，如何來 ...
進入ajax了，想要進入vue還有一個前提就是要把ajax給熟悉一下，看一看客戶端與伺服器之間是怎麼一個通信的過程，第一天主要是先瞭解了一下ajax的一些介紹，ajax嘛，在進入之前，肯定是要瞭解一下客戶端與伺服器之間的一個通信過程，其實不管是請求還是發送都遵循的一個原則，即請求、處理、響應，如何來請求伺服器上的數據，需要用到XMLHttpRequest對象，也就是聲明一個對象實例var xhrObj = new XMLHttpRequest（）。
我們通常所說的資源請求方式主要是分為兩種，一種是get請求向伺服器所求資源，一種是post向伺服器發送資源。
繼續看到什麼事ajax？可以簡單理解為用到了xhr，那他就是ajax，那麼為什麼要學習ajax？因為它可以輕鬆實現網頁與伺服器之間的數據交互，主要應用在如檢測用戶名是否被占用、載入搜索提示列表、根據頁碼刷新表格數據等。
我們這部分先以jQuery為例對ajax做一些操作，因為瀏覽器提供的xhr用法比較複雜，就先用jq來實現，jq裡面主要是就是分為三種$.get() $.post() $.ajax() 這三種，其中前兩種的用法是（url，【data】，【callback】），url使我們要請求的資源地址，data是我們的參數，callback是請求成功後的回調函數，他們兩個可以帶參請求也可以不帶參請求，然後$.ajax()它是既可以實現get也可以實現post，
（｛type : ‘get or post’， url ：‘’， data ： ｛｝ ， success ：｝） type就是請求方式，url請求地址，data參數，success是執行成功的回調
下麵就是一些jq分別利用ajax的get以及post請求的用法
1.
不帶參數的請求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <button> 發起不帶參數的請求 </button> <body> <script src="./lib/jquery.js"></script> <script> $('button').on('click', () => $.get('http://www.liulongbin.top:3006/api/getbooks', res => console.log(res))) </script> </body> </html>
2.
帶參數的請求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <button> 發起帶參數的請求 </button> <body> <script src="./lib/jquery.js"></script> <script> $('button').click(() => { $.get('http://www.liulongbin.top:3006/api/getbooks',{id : 2},res => console.log(res)) }) </script> </body> </html>
3.
post請求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>提交</button> <script src="./lib/jquery.js"></script> <script> $('button').on('click',function() { $.post('http://www.liulongbin.top:3006/api/addbook', {bookname:'水滸傳',author:'施耐庵',publisher:'上海圖書出版社'},res => console.log(res)) }) </script> </body> </html>
4.
ajax的get post請求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>get</button> <script src="./lib/jquery.js"></script> <script> $('button').on('click', function() { $.ajax({ type : 'get', url : 'http://www.liulongbin.top:3006/api/getbooks', data : { bookname : '紅樓夢' }, success : res => console.log(res) }) }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>post</button> <script src="./lib/jquery.js"></script> <script> $('button').on('click', function() { $.ajax({ type : 'post', url : 'http://www.liulongbin.top:3006/api/addbook', data : { bookname : '紅樓夢', author : '吳承恩', publisher: '出清圖書出版社' }, success : res => console.log(res) }) }) </script> </body> </html>
5.
然後是今天的綜合案例，首先是一個圖書管理的頁面利用ajax也就是後面會說到的介面達到添加刪除圖書的作用，然後結構使用bootstrap實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./lib/bootstrap.css"> <script src="./lib/jquery.js "></script> </head> <body style="padding: 15px;"> <!-- 添加圖書的面板 --> <!-- 1.primary表示藍色的意思 先設置一個面板藍色 --> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加新圖書</h3> </div> <!-- 2.1這裡有個註意點 加了一個類名form-inline為form加可使裡面的子元素為display inline block --> <div class="panel-body form-inline"> <!-- 2.在面板body裡面添加input表單 bs3-input-text這個 然後修改值--> <div class="input-group"> <div class="input-group-addon">書名</div> <input type="text" class="form-control" id="iptBookname" placeholder="請輸入書名"> </div> <div class="input-group"> <div class="input-group-addon">作者</div> <input type="text" class="form-control" id="iptAuthor" placeholder="請輸入作者"> </div> <div class="input-group"> <div class="input-group-addon">出版社</div> <input type="text" class="form-control" id="iptshiper" placeholder="請輸入出版社"> </div> <button id="btnAdd" class="btn btn-primary">添加</button> </div> </div> <!-- 圖書的表格 --> <table class="table table-bordered table-hover"> <thead> <tr> <th>ID</th> <th>書名</th> <th>作者</th> <th>出版社</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <script> // 1.獲取圖書列表 function getData() { $.get('http://www.liulongbin.top:3006/api/getbooks',res => { if (res.status == 500) { return alert('獲取數據失敗') }else { // 1.1這裡有個很厲害很厲害的點我搞了半天終於發現問題所在了，之前一直找不到 數據，就是這裡迴圈的時候，他不是像原生js一樣 // 可以只寫一個參數值，jq的好像是要把索引和參數都寫上才行！！！ let arr = [] $.each(res.data, (i, item) => { arr.push(`<tr> <td>${item.id}</td> <td>${item.bookname}</td> <td>${item.author}</td> <td>${item.publisher}</td> <td><a href="javascript:;" data-id="${item.id}" >刪除</a></td> </tr>`) }) $('tbody').empty().append(arr.join('')) } }) } getData() // 1.2為每個刪除按鈕添加刪除功能 首先還是要明確一個點，這裡的a標簽是後加的，所以才採用事件委托才行 $('tbody').on('click', 'a', function () { var id = $(this).attr('data-id') $.get('http://www.liulongbin.top:3006/api/delbook', { id: id }, function (res) { if (res.status !== 200) return alert('刪除圖書失敗！') getData() }) }) // 1.3 添加圖書功能 $('#btnAdd').on('click', function() { let bookname = $('#iptBookname').val() let author = $('#iptAuthor').val() let shiner = $('#iptshiper').val() if (!bookname || !author || !shiner) { alert( '請輸入完整內容' ) }else { $.post('http://www.liulongbin.top:3006/api/addbook', { bookname : bookname, author : author,
