什么是 AJAX ? mdn
什么是服务器?
为何学 AJAX ?
怎么学 AJAX ?
接下来讲解 axios 语法
引入 axios.js 文件到自己的网页中(如果第一个加载不了,可以使用第二个)
https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js
明确axios函数的使用语法
axios({
url: '目标资源地址'
}).then((result) => {
// 对服务器返回的数据做后续处理
})
注意:请求的 url 地址, 就是标记资源的网址
注意:then 方法这里先体验使用,由来后续会讲到
用一个需求来体验 axios 语法的使用,从服务器获取省份列表数据,展示到页面上
获取省份列表数据 - 目标资源地址:http://hmajax.itheima.net/api/province
对应代码
DOCTYPE html>
<html lang="zh-CN">
<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>AJAX介绍及axios基本使用title>
head>
<body>
<p class="province">
p>
<button class="btn">渲染省份数据button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">script>
<script>
document.querySelector('.btn').addEventListener('click', () => {
// console.log('点了按钮')
// 通过 axios 获取省份数据 并渲染
// 1. 调用axios函数
axios({
url: 'http://hmajax.itheima.net/api/province'
}).then(res => {
// 2. 接收并使用数据
// console.log(res)
// res.data 可以获取服务器返回的数据
// console.log(res.data)
console.log(res.data.list)
document.querySelector('.province').innerText = res.data.list
})
})
script>
body>
html>
AJAX 有什么用?
答案AJAX 如何学:
答案这一节 axios 体验步骤(语法)?
答案为什么要认识 URL ? mdn
什么是 URL ?
URL 的组成?
什么是 http 协议 ?
什么是域名 ?
什么是资源路径 ?
接下来做个需求,访问新闻列表的 URL 网址,打印新闻数据
新闻列表数据 URL 网址:http://hmajax.itheima.net/api/news
axios({
url: 'http://hmajax.itheima.net/api/news'
}).then(result => {
console.log(result)
})
url解释:从服务器使用http协议,访问/api/news路径下的新闻列表资源
URL 是什么?
答案请解释这个 URL,每个部分作用?
http://hmajax.itheima.net/api/news
答案什么是查询参数 ?
查询参数的语法 ?
axios 如何携带查询参数?
使用 params 选项即可、
axios({
url: 'http://测试服务器/资源路径',
params: {
key: 'value',
key2: 'value2'
}
}).then(res => {
// 接受并使用数据
})
查询城市列表的 url地址:http://hmajax.itheima.net/api/city
参数名:pname (值要携带省份名字)
需求:获取指定省份名字下属的城市列表,展示到页面
DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
head>
<body>
<button class="btn">获取城市数据并渲染button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">script>
<script>
document.querySelector('.btn').addEventListener('click', function () {
// console.log('点了按钮哦')
// 通过axios 获取某个省的城市 并输出
axios({
// url: 'http://hmajax.itheima.net/api/city?pname=湖南省',
url: 'http://hmajax.itheima.net/api/city',
// 开发中 一般用params 不需要自己拼接字符串避免出错
params: {
pname: '湖北省'
}
}).then(res => {
console.log(res.data)
})
})
script>
body>
html>
URL 查询参数有什么用?
答案axios 要如何携带查询参数?
答案需求:根据输入的省份名字和城市名字,查询下属地区列表
相关参数
查询地区: http://hmajax.itheima.net/api/area
参数名:
pname:省份名字
cname:城市名字
正确代码如下:
/*
http://hmajax.itheima.net/api/area
传递某个省份内某个城市的所有区县
查询参数名:pname、cname
pname说明:传递省份或直辖市名,比如 北京、湖北省…
cname说明:省份内的城市,比如 北京市、武汉市…
核心功能:查询地区,并渲染列表
*/
document.querySelector('.my-button').addEventListener('click', function () {
// console.log('点了按钮哦!')
// 1.获取输入框的内容
const pname = document.querySelector('.province').value
const cname = document.querySelector('.city').value
console.log('pname:', pname)
console.log('cname:', cname)
// 2.查询地区,并渲染列表
axios({
url: 'http://hmajax.itheima.net/api/area',
params: {
pname, cname // pname: pname,
// cname: cname
}
}).then(res => {
// console.log(res.data)
const list = res.data.list
// console.log('list:', list)
const htmlArr = list.map(v => `${v}
ES6 对象属性和值简写的前提是什么?
答案想要提交数据,先来了什么是请求方法
前面我们获取数据其实用的就是GET请求方法,但是axios内部设置了默认请求方法就是GET,我们就没有写
但是提交数据需要使用POST请求方法
什么时候进行数据提交呢?
axios 如何提交数据到服务器呢?
需要学习,method 和 data 这2个新的选项了(大家不用担心,这2个学完,axios常用的选项就都学完了)
axios({
url:'请求URL',
method:'post',
data:{
key:'value'
},
})
需求:注册账号,提交用户名和密码到服务器保存
注册用户 URL 网址:http://hmajax.itheima.net/api/register
请求方法:POST
参数名:
username:用户名(要求中英文和数字组成,最少8位)
password:密码(最少6位)
请求方法最常用的是哪2个,分别有什么作用?
答案axios 的核心配置项?
答案在 axios 语法中要如何处理呢?
使用 axios 的 catch 方法,捕获这次请求响应的错误并做后续处理,语法如下:
axios({
// 请求选项
}).then(res => {
// 处理数据
}).catch(err => {
// 处理错误
})
对应代码
document.querySelector('.btn').addEventListener('click', function () {
// console.log('点了')
// 通过axios提交用户数据,完成用户注册
axios({
url: 'http://hmajax.itheima.net/api/register',
method: 'post',
data: {
username: 'itheima008',
password: '123456'
}
}).then(res => {
console.log(res.data)
}).catch(err => {
// 重复注册,通过弹框提示用户
// console.log(err)
// console.log(err.response.data)
alert(err.response.data.message)
})
})
axios 如何拿到请求响应失败的信息?
答案首先,HTTP 协议规定了浏览器和服务器返回内容的格式
这里的格式包含:
我们切换到浏览器中,来看看刚才注册用户发送的这个请求报文以及内容去哪里查看呢
浏览器发送给服务器的内容叫做,请求报文
请求报文的组成是:
答案通过 Chrome 的网络面板如何查看请求体?
学会了查看请求报文,对实际开发有什么帮助呢?
答案响应报文的组成:
HTTP 响应状态码:
用来表明请求是否成功完成
例如:404(服务器找不到资源)
响应报文的组成?
答案HTTP 响应状态码是做什么的?
答案接口文档是什么?
答案接口文档里包含什么?
答案先来到备课代码中,运行完成的页面,查看要完成的效果
分析实现的步骤
本视频先来完成前2步
编写代码,查看接口文档,填写相关信息,完成登录业务
代码细节:
// 1.获取 alert
const alertCom = document.querySelector('.alert')
// 2.抽取提示框的方法
function showAlert(msg, classname) {
alertCom.innerText = msg
alertCom.classList.add(classname)
alertCom.classList.add('show')
setTimeout(() => {
// 延迟隐藏
alertCom.classList.remove('show')
alertCom.classList.remove(classname)
}, 1000);
}
// 3.给登录按钮绑定点击事件,提交输入的用户信息到服务器
document.querySelector('.btn-login').addEventListener('click', function () {
// 3.1 获取输入的用户名和密码
const username = document.querySelector('.username').value.trim()
const password = document.querySelector('.password').value.trim()
// 3.2用户名 密码 长度判断
if (username.length < 8) {
showAlert('用户名长度需要大于等于8', 'alert-danger')
return
}
if (password.length < 6) {
showAlert('密码长度需要大于等于6', 'alert-danger')
return
}
// 3.3 通过axios提交到服务器 并 提示用户 成功 / 失败
axios({
url: 'http://hmajax.itheima.net/api/login',
method: 'post',
data: {
username,
password
}
}).then(res => {
// 显示提示框
showAlert(res.data.message, 'alert-success')
}).catch(err => {
// 显示警示框
showAlert(err.response.data.message, 'alert-danger')
})
})
总结下用户登录案例,本视频做的思路
答案先来到备课代码中,运行完成的页面,查看要完成的效果
使用提示框,反馈提示消息,因为有4处地方需要提示框,所以封装成函数
获取提示框
封装提示框函数,重复调用,满足提示需求
功能:
对应提示框核心代码:
// 4. 封装提示框函数
function myAlert(msg, flag) {
// 获取弹框的dom元素
const alertDom = document.querySelector('.my-alert')
// 显示弹框 添加 show类名
alertDom.classList.add('show')
// 更改弹框的内容-使用msg的内容
alertDom.innerText = msg
// 根据flag 控制外观 成功true- alert-success / 失败false- alert-danger
alertDom.classList.add(flag ? 'alert-success' : 'alert-danger')
// 过一会,隐藏弹框
setTimeout(() => {
alertDom.classList.remove('show')
alertDom.classList.remove(flag ? 'alert-success' : 'alert-danger')
}, 1000);
}
我们什么时候需要封装函数?
答案如何封装一个函数呢?
答案我们的提示框是如何控制出现/隐藏的?
答案我们前面收集表单元素的值,是一个个标签获取的
如果一套表单里有很多很多表单元素,如何一次性快速收集出来呢?
使用 form-serialize 插件提供的 serialize 函数就可以办到
form-serialize 插件语法:
需求:收集登录表单里用户名和密码
DOCTYPE html>
<html lang="zh-CN">
<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>form-serializetitle>
head>
<body>
<form action="javascript:;" class="example-form">
<input type="text" name="uname" />
<br>
<input type="text" name="pword" />
<br>
<input type="submit" class="submit" value="提交" />
form>
<script src="./lib/form-serialize.js">script>
<script>
/*
form-serialize 快速收集表单的值
1. 表单元素需要设置name属性,会成为对象的属性名
2. name属性设置的值和接口文档一致即可
3. hash 设置生成的数据格式
- true:js对象(常用)
- false:查询字符串
4. empty 是否收集空数据
- true:收集空数据,保证格式和表单一致(推荐用法)
- false:不收集空数据,格式和表单不一定一致(不推荐)
*/
document.querySelector('.submit').addEventListener('click', () => {
// console.log('点了按钮')
const form = document.querySelector('.example-form')
// 参数1 form表单,要取值的表单元素需要在form表单中
// 参数2 插件的设置,{}
const data = serialize(form, { hash: true, empty: true })
// const data = serialize(form, { hash: false, empty: true })
// const data = serialize(form, { hash: true, empty: false })
console.log(data)
})
script>
body>
html>
我们什么时候使用 form-serialize 插件?
答案如何使用 form-serialize 插件?
答案配置对象中 hash 和 empty 有什么用?
答案const alertCom = document.querySelector('.alert')
function showAlert(msg, classname) {
//更改弹框内容->msg
alertCom.innerText = msg
// 成功或者失败的样式根据传入的classname决定,alert-danger/alert-success
alertCom.classList.add(classname)
//显示弹框,添加show类名
alertCom.classList.add('show')
setTimeout(() => {
// 延迟隐藏
alertCom.classList.remove('show')
alertCom.classList.remove(classname)
}, 1000);
}
document.querySelector(".btn-login").addEventListener("click", () => {
// const username = document.querySelector(".username").value;
// const password = document.querySelector(".password").value;
// console.log(username, password)
/*
form-serialize 快速收集表单的值
1. 表单元素需要设置name属性,会成为对象的属性名
2. name属性设置的值和接口文档一致即可
3. hash 设置生成的数据格式
- true:js对象(常用)
- false:查询字符串
4. empty 是否收集空数据
- true:收集空数据,保证格式和表单一致(推荐用法)
- false:不收集空数据,格式和表单不一定一致(不推荐)
*/
const form = document.querySelector(".login-form");
// 参数1 form表单,要取值的表单元素需要在form表单中
// 参数2 插件的设置,{}
const { username, password } = serialize(form, { hash: true, empty: true });
// console.log(data);
if (username.length < 8) {
showAlert('用户名长度需要大于等于8', 'alert-danger')
console.log("用户名长度应该大于等于8");
return;
}
if (password.length < 6) {
showAlert('密码长度应该大于等于6', 'alert-danger')
console.log("密码长度应该大于等于6");
return;
}
axios({
url: "http://hmajax.itheima.net/api/login",
method: "post",
data: {
username,
password
}
}).then(
res => {
console.log(res.data.message);
showAlert(res.data.message, 'alert-success')
}
).catch(
err => {
console.log(err.response.data.message);
showAlert(err.response.data.message, 'alert-success')
}
);
});
如何把一个第三方插件使用在已完成的案例中?
答案