您现在的位置是：首页 > 其他

当前栏目

Ajax实现个人信息修改上传服务器案例（综合练习）

案例上传服务器 AJAX 实现修改练习综合

2023-09-27 14:26:50 时间

🥳博主：初映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>

猜你喜欢

伪造http的ip地址，突破ip限制的投票程序
一石几鸟：华为缘何此时对三星发起专利战？
github action自动部署构建入门
国产计算框架mindspore在gpu环境下编译分支r1.3，使用suod权限成功编译并安装，成功运行——（修复部分bug，给出具体编译和安装过程）—— 第一部分：依赖环境的安装
Three.js Example 注解 —— webgl_voxels_liquid.html
如何设置docker hub的头像
Python访问、修改、删除字典中的值
Spring Boot——Thymeleaf
《SQL学习指南（第2版）（修订版）》导读
增删改查
centos出现“FirewallD is not running”怎么办
结构化数据、半结构化数据和非结构化数据有什么区别以及应用场景有哪些？
hdu4971 流-最大权闭包
大数据技术应用于上海基层金融风险综合监测服务平台
jsoup

相关主题

python爬虫案例
线程池-案例1
Hive案例
案例准备
案例二
案例
nginx案例

zl程序教程

当前栏目

Ajax实现个人信息修改上传服务器案例（综合练习）

本案例整体思路：

开始操作啦！

一、制作渲染省市县封装模块

二、省市地区联动

三、图片（线上）预览

四、个人信息修改保存模块

附上，本文的源代码

相关文章