🥳博 主:初映CY的前说
🌞个人信条:想要变成得到,中间还有做到!
✏️当前专栏:~~Ajax专栏(可点击获取更多Ajax知识)
🤘本文核心:Ajax(await async)的使用、对象解构语法、DOM对象的使用
目录:
下图所示,本文实现的效果(文末有源代码,如对你有帮助请点个赞,谢谢~~~)
本案例整体思路:
开始操作啦!
先引入我们的基地址与axios库,获取表单的dom元素
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script>
// 设置基地址,省略url重复的写法
axios.defaults.baseURL = 'http://ajax-api.itheima.net'
// 获取表单需要的所有dom元素,方便后面的dom操作
const nickname = document.querySelector('[name="nickname"]')
const province = document.querySelector('[name="province"]')
const city = document.querySelector('[name="city"]')
const area = document.querySelector('[name="area"]')
const img = document.querySelector('.rounded')
一、制作渲染省市县封装模块
async function getUserInfo() {
// 获取个人信息
const { data } = await axios.get('/api/settings')
console.log(data);
// 渲染生成昵称与头像
img.src = data.data.avatar
nickname.value = data.data.nickname
// 1.先从服务器获取省份的数据
const { data: data1 } = await axios.get('/api/province')
console.log(data1);
//2获取下拉框
province.innerHTML = data1.data.map(item => `<option value="${item}">${item}</option>`).join('')
province.value = data.data.province
//市
const { data: data2 } = await axios.get(`/api/city?pname=${data.data.province}`)
console.log(data2);
city.innerHTML = data2.data.map(item => `<option value="${item}">${item}</option>`).join('')
city.value = data.data.city
// 地区
const { data: data3 } = await axios.get(`/api/area?pname=${data.data.province}&cname=${data.data.city}`)
console.log(data3);
area.innerHTML = data3.data.map(item => `<option value="${item}">${item}</option>`).join('')
area.value = data.data.area
}
// 调用函数
getUserInfo()
二、省市地区联动
// 1、开始做省市联动,change事件:当改变的时候才触发
province.addEventListener('change', async function () {
console.log(province.value);
const { data: data2 } = await axios.get(`/api/city?pname=${province.value}`)
console.log(data2);
city.innerHTML = data2.data.map(item => `<option value="${item}">${item}</option>`).join('')
// 3、最后开始做三级(省市县)联动
const { data: data3 } = await axios.get(`/api/area?pname=${province.value}&cname=${city.value}`)
console.log(data3);
area.innerHTML = data3.data.map(item => `<option value="${item}">${item}</option>`).join('')
})
// 2、开始做市与县
city.addEventListener('change', async function () {
console.log(city.value);
const { data: data3 } = await axios.get(`/api/area?pname=${province.value}&cname=${city.value}`)
console.log(data3);
area.innerHTML = data3.data.map(item => `<option value="${item}">${item}</option>`).join('')
})
三、图片(线上)预览
// 开始做图片预览
document.querySelector('#upload').addEventListener('change',function(){
const file =this.files[0]
// URL.createObjectURL将我们的文件转线上
const url =URL.createObjectURL(file)
img.src=url
})
// 点击图片触发<input type="file" id="upload" /> 这个设置了hidden看不到(美观一点所以隐藏了css设置了hidden属性)
img.addEventListener('click',function(){
document.querySelector('#upload').click()
})
四、个人信息修改保存模块
// ----修改个人信息
document.querySelector('.btn-primary').addEventListener('click',async function(e){
e.preventDefault()
// 图片保存
const fd = new FormData()
// 文件放在FormData容器中用id名调用文件的位置
fd.append('avatar',upload.files[0])
const {data:data1}=await axios.post('/api/file',fd)
console.log(data1);
// 信息保存
const { data } = await axios.put('/api/settings',{
nickname:nickname.value,
province:province.value,
city:city.value,
area:area.value,
avatar:data1.data.url
})
console.log(data);
getUserInfo()
})
附上,本文的源代码
<!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>08.案例_个人信息修改</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
<style>
.form-select {
width: 103px;
display: inline-block;
}
.col-form-label {
text-align: right;
}
.figure-img {
width: 100px;
height: 100px;
cursor: pointer;
}
#upload {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1 class="p-5">个人设置</h1>
<form class="col-6">
<div class="row mb-3">
<label class="col-form-label col-3">昵称:</label>
<div class="col-9">
<input class="form-control col-9" type="text" name="nickname" />
</div>
</div>
<div class="row mb-3">
<label class="col-form-label col-3">籍贯:</label>
<div class="col-9">
<select class="form-select col-4" name="province">
<option value="">--省--</option>
</select>
<select class="form-select col-4" name="city">
<option value="">--市--</option>
</select>
<select class="form-select col-4" name="area">
<option value="">--区--</option>
</select>
</div>
</div>
<div class="row mb-3">
<label class="col-form-label col-3">头像:</label>
<div class="col-9">
<!-- -->
<input class="form-control col-9" type="hidden" name="avatar" />
<figure class="figure">
<input type="file" id="upload" />
<img src="https://yanxuan-item.nosdn.127.net/12a882699bd531a1bd428bffe1989525.jpg"
class="figure-img img-fluid rounded" alt="..." />
<figcaption class="figure-caption">修改头像</figcaption>
</figure>
</div>
</div>
<div class="row mb-3">
<label class="col-3"></label>
<div class="col-9">
<button class="btn btn-primary">保存</button>
</div>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script>
// 设置基地址,省略url重复的写法
axios.defaults.baseURL = 'http://ajax-api.itheima.net'
// 获取表单需要的所有dom元素,方便后面的dom操作
const nickname = document.querySelector('[name="nickname"]')
const province = document.querySelector('[name="province"]')
const city = document.querySelector('[name="city"]')
const area = document.querySelector('[name="area"]')
const img = document.querySelector('.rounded')
async function getUserInfo() {
// 获取个人信息
const { data } = await axios.get('/api/settings')
console.log(data);
// 渲染生成昵称与头像
img.src = data.data.avatar
nickname.value = data.data.nickname
// 1.先从服务器获取省份的数据
const { data: data1 } = await axios.get('/api/province')
console.log(data1);
//2获取下拉框
province.innerHTML = data1.data.map(item => `<option value="${item}">${item}</option>`).join('')
province.value = data.data.province
//市
const { data: data2 } = await axios.get(`/api/city?pname=${data.data.province}`)
console.log(data2);
city.innerHTML = data2.data.map(item => `<option value="${item}">${item}</option>`).join('')
city.value = data.data.city
// 地区
const { data: data3 } = await axios.get(`/api/area?pname=${data.data.province}&cname=${data.data.city}`)
console.log(data3);
area.innerHTML = data3.data.map(item => `<option value="${item}">${item}</option>`).join('')
area.value = data.data.area
}
// 调用函数
getUserInfo()
// 1、开始做省市联动,change事件:当改变的时候才触发
province.addEventListener('change', async function () {
console.log(province.value);
const { data: data2 } = await axios.get(`/api/city?pname=${province.value}`)
console.log(data2);
city.innerHTML = data2.data.map(item => `<option value="${item}">${item}</option>`).join('')
// 3、最后开始做三级(省市县)联动
const { data: data3 } = await axios.get(`/api/area?pname=${province.value}&cname=${city.value}`)
console.log(data3);
area.innerHTML = data3.data.map(item => `<option value="${item}">${item}</option>`).join('')
})
// 2、开始做市与县
city.addEventListener('change', async function () {
console.log(city.value);
const { data: data3 } = await axios.get(`/api/area?pname=${province.value}&cname=${city.value}`)
console.log(data3);
area.innerHTML = data3.data.map(item => `<option value="${item}">${item}</option>`).join('')
})
// 开始做图片预览
document.querySelector('#upload').addEventListener('change',function(){
const file =this.files[0]
// URL.createObjectURL将我们的文件转线上
const url =URL.createObjectURL(file)
img.src=url
})
// 点击图片触发<input type="file" id="upload" /> 这个设置了hidden看不到(美观一点所以隐藏了css设置了hidden属性)
img.addEventListener('click',function(){
document.querySelector('#upload').click()
})
// ----修改个人信息
document.querySelector('.btn-primary').addEventListener('click',async function(e){
e.preventDefault()
// 图片保存
const fd = new FormData()
// 文件放在FormData容器中用id名调用文件的位置
fd.append('avatar',upload.files[0])
const {data:data1}=await axios.post('/api/file',fd)
console.log(data1);
// 信息保存
const { data } = await axios.put('/api/settings',{
nickname:nickname.value,
province:province.value,
city:city.value,
area:area.value,
avatar:data1.data.url
})
console.log(data);
getUserInfo()
})
</script>
</body>
</html>