ajax学习1

<!-- 目标：使用axios库，获取省份列表数据，展示到页面上
1.引入axios库
-->
<p class="my-p"></p>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></
script>
<script>
//2.使用axios函数
axios({
url: 'http: //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>

URL

 

小案例

//目标：根据省份和城市名字，查询地区列表
//1.查询按钮-点击事件
document.querySelector('.sel-btn').addEventListener
('click',()=>{
//2.获取省份和城市名字
let pName = document. querySelector('.province').value
let 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.list
console.log(list)
let theli = list.map(areaName =>`<li
class="list-group-item">${areaName}</li>`).join(')
console.log(theLi)
document.querySelector('.list-group').innerHTML=theLi
})
})

请求方法

No，请求方式实际上在很大程度上决定了数据的增删改查（CRUD）操作。在Web开发中，HTTP方法被用来指示对资源的操作类型。以下是最常见的HTTP方法及其通常对应的CRUD操作：

- `GET`：用于检索信息，对应于“查询”（Read）操作。
- `POST`：用于发送数据到服务器以创建/更新资源，通常对应于“创建”（Create）操作。
- `PUT` 或 `PATCH`：用于更新现有资源，对应于“更新”（Update）操作。`PUT`通常用于完全替换一个资源，而`PATCH`用于部分更新。
- `DELETE`：用于删除资源，对应于“删除”（Delete）操作。

虽然这些约定并非强制性规则，但它们是RESTful API设计中的标准实践。然而，在实际应用中，开发者可能会根据具体需求灵活使用这些方法，有时甚至可能使用`POST`来执行删除或更新操作，但这通常被视为不遵循最佳实践。因此，请求方式确实影响并通常决定了数据的CRUD操作。

 axios请求配置

url:请求的URL网址
method：请求的方法，GET可以省略（不区分大小写）                                                                data:提交数据

axios({
url：'目标资源地址'，
method:'请求方法'， 
data:{
参数名：值 
}
}).then((result)=>{
//对服务器返回的数据做后续处理
})

response里的date返回报错信息

axios的错误处理

语法：在then 方法的后面，通过点语法调用catch方法，传入回调函数并定义形参

axios({
//请求选项 }).then(result => //处理数据 }) catch(error = //处理错误 )

http的请求报文

F12中网络，的Fetch/XHR是http协议，可以看请求标头。

载荷这可以看源代码

 请求报文-错误排查

先定位到网络中，找代码中在哪里携带的

响应报文

规定了浏览器发送和服务器返回内容的格式

常见的400，406，404等等等等

 接口文档

https://apifox.com

这里只要按照网页的信息来写即可，一一对应 。

在浏览器F12，网络的响应来看服务器返回数据

用户登录案例

改进提示框

添加了一个bootstrap的框，alert的div添加show的类名，防抖

form-serialize插件

const form=document.querySelector('.example-form')

const data = serialize(form,{hash:ture,empty:true})

 等于只用获取一个表单dom就行了,  new FormData()也可以吗？

一个小例子

已经准备了表单
<form action="javascript: ; "class="example-form"> 
 <input type="text" name="uname">
 <br>
 <input type="text" name="pwd"> 
 <br>
<input type="button" class="btn" value="提交"> 
</form>
在点击提交时，使用插件，搜集表单元素
<script src="./lib/form-serialize.js"></script> 
<script>
document. querySelector('.btn'). addEventListener(' click',()=>{
/*2.使用serialize函数，快速收集表单元素的值
*参数1：要获取哪个表单的数据参数2：配置对象
*/
/*表单内容设置name属性，作为对象属性名，因此建议名字和元素相同名字*/
const form=document.querySelector('. example-form') 
const data serialize(form, {hash: true, empty: true})
//const data serialize(form, {hash: false, empty: true})
//hash换成false，就会换成一串文字username=itheiman007&password=7654321
//true就是JS对象
console.log(data)
}) 
</script> 

hash设置获取数据结构，empty设置是否获取空值

要求使用serialize获取元素对象.