一.Ajax入門

概念:AJAX是瀏覽器與服務器進行數據通信的技術

axios使用:

引入axios.js
使用axios函數:傳入配置對象,再用.then回調函數接受結果,并做后續處理

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>01.axios使用</title></head><body><p class="my-p"></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url:'https://hmajax.itheima.net/api/province'}).then(result=>{console.log(result)console.log(result.data.list)console.log(result.data.list.join('<br>'))//把準備好的省份列表,插入到頁面document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')})</script></body>
</html>

二.URL

1.概念

概念:統一資源定位符,簡稱網址,用于訪問網絡上的資源

?http協議:超文本傳輸協議,規定瀏覽器和服務器之間傳輸數據的格式
域名:標記服務器在互聯網中方位
資源路徑:標記資源在服務器下的具體位置

2.URL查詢參數

定義:瀏覽器提供給服務器的額外信息,讓服務器返回瀏覽器想要的數據

3.axios-查詢參數

語法:使用axios提供的params選項

注意:axios在運行時把參數名和值,會拼接到url?參數名=值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>03.查詢參數</title></head><body><p></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url: 'https://hmajax.itheima.net/api/city',//查詢參數params: {pname: '遼寧省'}}).then(result => {console.log(result.data.list)document.querySelector('p').innerHTML = result.data.list.join('<br>')})</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>04.案例_地區查詢</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"><style>:root {font-size: 15px;}body {padding-top: 15px;}</style>
</head><body><div class="container"><form id="editForm" class="row"><!-- 輸入省份名字 --><div class="mb-3 col"><label class="form-label">省份名字</label><input type="text" value="北京" name="province" class="form-control province" placeholder="請輸入省份名稱" /></div><!-- 輸入城市名字 --><div class="mb-3 col"><label class="form-label">城市名字</label><input type="text" value="北京市" name="city" class="form-control city" placeholder="請輸入城市名稱" /></div></form><button type="button" class="btn btn-primary sel-btn">查詢</button><br><br><p>地區列表: </p><ul class="list-group"><!-- 示例地區 --><li class="list-group-item">東城區</li></ul></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*獲取地區列表: http://hmajax.itheima.net/api/area查詢參數:pname: 省份或直轄市名字cname: 城市名字*///目標:根據省份和城市名字,查詢地區列表//1.查詢按鈕-點擊事件document.querySelector('.sel-btn').addEventListener('click',() =>{//2.獲取省份和城市名字let pName = document.querySelector('.province').valuelet cName = document.querySelector('.city').value//3.基于axios請求地區列表數據axios({url:'http://hmajax.itheima.net/api/area',params:{pname: pName,cname: cName}}).then(result =>{//console.log(result)//4.把數據轉成li標簽插入到頁面上let list = result.data.listconsole.log(list)let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')console.log(theLi)document.querySelector('.list-group').innerHTML = theLi})})</script>
</body></html>

注意:let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')

這段代碼中用的是反引號

反引號（`）是用于創建模板字符串的特殊字符

四.常用請求方法和數據提交

1.請求方法

請求方法:對服務器資源,要執行的操作

2. axios請求配置

url:請求的URL網址
method:請求的方法,GET可以省略(不區分大小寫)
data:提交數據

3.數據提交-注冊賬號

需求:通過axios提交用戶名和密碼,完成注冊功能

請求方法:POST

參數名:

username用戶名(中英文和數字組成,最少8位)

password密碼(最少6位)

<!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>05.常用請求方法和數據提交</title>
</head><body><button class="btn">注冊用戶</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*注冊用戶: http://hmajax.itheima.net/api/register請求方法: POST參數名:username: 用戶名 (中英文和數字組成, 最少8位)password: 密碼 (最少6位)目標: 點擊按鈕, 通過axios提交用戶和密碼, 完成注冊*/document.querySelector('.btn').addEventListener('click',() => {axios({url: 'http://hmajax.itheima.net/api/register',//指定請求方法method:'post',//提交數據data:{username:'itheima777',password:'123456'}}).then(result =>{console.log(result)})})</script>
</body></html>

注意:數據提交之后服務器上就已經存在了,再次運行會報錯

五.axios錯誤處理

場景:在上面的案例中再次注冊相同的賬號,會遇到報錯信息

處理:用更直觀的方式,給普通用戶展示錯誤信息

? ? ? ? 注冊案例,重復注冊時通過彈框提示用戶錯誤原因

語法:在then方法的后面,通過點語法調用catch方法,傳入回調函數并定義形參

<!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>05.常用請求方法和數據提交</title>
</head><body><button class="btn">注冊用戶</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*注冊用戶: http://hmajax.itheima.net/api/register請求方法: POST參數名:username: 用戶名 (中英文和數字組成, 最少8位)password: 密碼 (最少6位)目標: 點擊按鈕, 通過axios提交用戶和密碼, 完成注冊需求:使用axios錯誤處理語法,拿到報錯信息,彈框反饋給用戶*/document.querySelector('.btn').addEventListener('click',() => {axios({url: 'http://hmajax.itheima.net/api/register',//指定請求方法method:'post',//提交數據data:{username:'itheima777',password:'123456'}}).then(result =>{//成功console.log(result)}).catch(error =>{//失敗//處理錯誤信息console.log(error)console.log(error.response.data.messag)alert(error.response.data.message)})})</script>
</body></html>