我要评论黑马程序员前端ajax入门到实战全套教程，包含学前端框架必会的（ajax+node.js+webpack+git），一套全覆盖 day1
文章目录
大致课程安排
ajax
达到视频中效果课使用的插件
安装插件
preview on web server
使用插件
注意视频中其实是开了一个浏览器，然后实现一半一半屏幕
- 然后通过open in browser来
快速入门小案例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>axios基本使用</title>
</head>
<body>
<p class="my-p"></p>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios({
url:'http://hmajax.itheima.net/api/province'
}).then(result => {
console.log(result)
console.log(result.data.list)
document.queryselector('.my-p').innerhtml = result.data.list.join('<br>')
})
</script>
</html>
url介绍
- 对资源
axios为什么这么写介绍
- 使用.then的方式来进行处理返回结果，result就是请求成功后服务器返回的东西
axios参数
axios查询参数
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>axios基本使用</title>
</head>
<body>
<p class="my-p"></p>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios({
url:'http://hmajax.itheima.net/api/city',
params:{
pname:'福建省'
}
}).then(result =>{
console.log(result.data.list)
document.queryselector('p').innerhtml = result.data.list.join('<br>')
})
</script>
</html>
-
主要还是和js配合起来使用，使用js来获得数据然后使用axios进行查询
-
当属性名和变量名同名时，可以写为pname或cname
axios请求方法参数
小案例实践
- 代码编写成功后点击按钮查看request这里，
小案例报错！代码看着没问题但显示typeerror: cannot read properties of undefined (reading ‘protocol’)
- 这种情况，是你使用错误，比如data写成date什么的。在本例中，就是将url写成url了
axios错误处理
- 注意，result、error都是箭头函数，因此，result不能在error括号中使用
http
http请求协议
通过请求报文查错
- 发现发送的数据是有问题的
通过请求找bug思路
一：复现bug
二：查看报错信息或请求信息
三：根据信息找到相关代码，以此为切入点，理解一部分项目，从而进行代码修改
http响应协议
- http协议很关键，可以多花时间找两篇博客来看一看
接口文档
- 这里很简单，相关代码官方也有给出，我就不记了
结天案例
- 这里成功失败是框架定义的，所以看框架中文文档就好了
- 这个框架引入之后，只需要写类样式，他自己会把你写上类样式的地方变成已经写好的界面
form-seralize插件
- 这个插件的用法直接看视频就好了
发表评论