AJAX---個人資訊案例-有解無憂

案例分析：

如圖所示，頁面加載時有資料回填，同時實作select表單同步和圖片上傳，保存后上傳至服務器等功能

HTML模板：


<!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/[email protected]/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 >
    <h1 >個人設定</h1>
    <form >
      <div >
        <label >昵稱：</label>
        <div >
          <input  type="text" name="nickname" />
        </div>
      </div>
      <div >
        <label >籍貫：</label>
        <div >
          <select  name="province">
            <option value="">--省--</option>
          </select>
          <select  name="city">
            <option value="">--市--</option>
          </select>
          <select  name="area">
            <option value="">--區--</option>
          </select>
        </div>
      </div>
      <div >
        <label >頭像：</label>
        <div >
          <input  type="hidden" name="avatar" />
          <figure >
            <input type="file" id="upload" />
            <img src="https://img.uj5u.com/2022/11/20/330631200645272.jpg"
               alt="..." />
            <figcaption >修改頭像</figcaption>
          </figure>
        </div>
      </div>
      <div >
        <label ></label>
        <div >
          <button >保存</button>
        </div>
      </div>
    </form>
  </div>

  <script src="https://unpkg.com/[email protected]/dist/js/bootstrap.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
  <script src="https://www.cnblogs.com/Ayako/archive/2022/11/17/lib/form-serialize.js"></script>
 
</body>

</html>

一.頁面回填

通過獲取內置個人資訊進行頁面回填

<script>
    // 前綴基地址
    axios.defaults.baseURL = 'http://ajax-api.itheima.net/'
    // 獲取標簽方法$
    function $(id) {
        return document.querySelector('#' + id)
    }
    // 資料回填方法
    async function getInfo() {
        const res = await axios.get('api/settings')
        const { nickname, province, city, area, avatar } = res.data.data
        // 昵稱
        $('nickname').value = https://www.cnblogs.com/Ayako/archive/2022/11/17/nickname
        // 頭像地址
        $('avatar').src = https://www.cnblogs.com/Ayako/archive/2022/11/17/avatar
        // 給頭像框input進行賦值，方便后期拿取資料
        $('avatarInp').value = https://www.cnblogs.com/Ayako/archive/2022/11/17/avatar
        // 省資料
        const provinceAll = await axios.get('api/province')
        $('province').innerHTML += provinceAll.data.data.map(item => `<option value="https://www.cnblogs.com/Ayako/archive/2022/11/17/${item}">${item}</option>`).join('')
        $('province').value = https://www.cnblogs.com/Ayako/archive/2022/11/17/province
        // 市資料
        const cityAll = await axios.get('api/city?pname=' + province)
        $('city').innerHTML += cityAll.data.data.map(item => `<option value="https://www.cnblogs.com/Ayako/archive/2022/11/17/${item}">${item}</option>`).join('')
        $('city').value = https://www.cnblogs.com/Ayako/archive/2022/11/17/city
        // 區資料
        const areaAll = await axios.get(`api/area?pname=${province}&cname=${city}`)
        $('area').innerHTML += areaAll.data.data.map(item => `<option value="https://www.cnblogs.com/Ayako/archive/2022/11/17/${item}">${item}</option>`).join('')
        $('area').value = https://www.cnblogs.com/Ayako/archive/2022/11/17/area

    }
    // 呼叫回填方法
    getInfo()
</script>

二.省市區下拉框的聯動

<script>
    // 省資料下拉框
    $('province').addEventListener('change', async () => {
        // 獲取省下市資料
        const cityAll = await axios.get('api/city?pname=' + $('province').value)
        // 渲染市資料
        $('city').innerHTML = cityAll.data.data.map(item => `<option value="https://www.cnblogs.com/Ayako/archive/2022/11/17/${item}">${item}</option>`).join('')
        // 獲取市下區資料
        const areaAll = await axios.get(`api/area?pname=${$('province').value}&cname=${$('city').value}`)
        // 渲染區資料
        $('area').innerHTML = areaAll.data.data.map(item => `<option value="https://www.cnblogs.com/Ayako/archive/2022/11/17/${item}">${item}</option>`).join('')
    })

    $('city').addEventListener('change', async () => {
        const areaAll = await axios.get(`api/area?pname=${$('province').value}&cname=${$('city').value}`)
        $('area').innerHTML = areaAll.data.data.map(item => `<option value="https://www.cnblogs.com/Ayako/archive/2022/11/17/${item}">${item}</option>`).join('')
    })
</script>

三.頭像圖片上傳功能

<script>
    // 圖片上傳功能
    $('upload').addEventListener('change', (e) => {
        // 非空判斷
        if (e.target.files.length === 0) {
            return
        }
        // 創建FormData接收
        const fd = new FormData()
        // 將圖片資料添加到fd中
        fd.append('avatar', e.target.files[0])
        // 圖片上傳介面
        axios.post('api/file', fd).then(res => {
            console.log(res);
            $('avatar').src = https://www.cnblogs.com/Ayako/archive/2022/11/17/res.data.data.url
            //  給頭像框input進行賦值，方便拿取資料
            $('avatarInp').value = https://www.cnblogs.com/Ayako/archive/2022/11/17/res.data.data.url
        })
    })
    // 圖片點擊事件
    $('avatar').addEventListener('click', () => {
        // 優化圖片上傳功能
        $('upload').click()
    })      
</script>

四.將資料上傳至服務器保存

<script>
    // 上傳點擊事件
    $('uploadAll').addEventListener('click', async (e) => {
        // 取消默認重繪操作
        e.preventDefault()
        // 用serialize獲取表單中所有內容(前面給頭像框input賦值的應用)
        const userFormall = serialize($('userForm'), { hash: true })
        try {
            // 執行成功,上傳資料并彈出ok彈框
            await axios.put('api/settings', userFormall)
            alert('ok')
        } catch (error) {
            alert('error')
        }
    })
</script>

五.個人經驗

①省市區下拉框聯動時，操作省資料聯動市資料時，仍需對區資料進行聯動

②給圖片input框的value賦值，方便最后上傳服務器時用serialize獲取資料

③附完整原始碼

<!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/[email protected]/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 >
        <h1 >個人設定</h1>
        <form  id="userForm">
            <div >
                <label >昵稱：</label>
                <div >
                    <input  type="text" name="nickname" id="nickname" />
                </div>
            </div>
            <div >
                <label >籍貫：</label>
                <div >
                    <select  name="province" id="province">
                        <option value="">--省--</option>
                    </select>
                    <select  name="city" id="city">
                        <option value="">--市--</option>
                    </select>
                    <select  name="area" id="area">
                        <option value="">--區--</option>
                    </select>
                </div>
            </div>
            <div >
                <label >頭像：</label>
                <div >
                    <input  type="hidden" name="avatar" id="avatarInp" />
                    <figure >
                        <input type="file" id="upload" />
                        <img src="https://img.uj5u.com/2022/11/20/330631200645272.jpg"
                             alt="..." id="avatar" />
                        <figcaption  id="load">修改頭像</figcaption>
                    </figure>
                </div>
            </div>
            <div >
                <label ></label>
                <div >
                    <button    id="uploadAll">保存</button>
                </div>
            </div>
        </form>
    </div>

    <script src="https://unpkg.com/[email protected]/dist/js/bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
    <script src="https://www.cnblogs.com/Ayako/archive/2022/11/17/lib/form-serialize.js"></script>
    <script>
        // 前綴基地址
        axios.defaults.baseURL = 'http://ajax-api.itheima.net/'
        // 獲取標簽方法$
        function $(id) {
            return document.querySelector('#' + id)
        }
        // 資料回填方法
        async function getInfo() {
            const res = await axios.get('api/settings')
            const { nickname, province, city, area, avatar } = res.data.data
            // 昵稱
            $('nickname').value = https://www.cnblogs.com/Ayako/archive/2022/11/17/nickname
            // 頭像地址
            $('avatar').src = https://www.cnblogs.com/Ayako/archive/2022/11/17/avatar
            // 給頭像框input進行賦值，方便后期拿取資料
            $('avatarInp').value = https://www.cnblogs.com/Ayako/archive/2022/11/17/avatar
            // 省資料
            const provinceAll = await axios.get('api/province')
            $('province').innerHTML += provinceAll.data.data.map(item => `<option value="https://www.cnblogs.com/Ayako/archive/2022/11/17/${item}">${item}</option>`).join('')
            $('province').value = https://www.cnblogs.com/Ayako/archive/2022/11/17/province
            // 市資料
            const cityAll = await axios.get('api/city?pname=' + province)
            $('city').innerHTML += cityAll.data.data.map(item => `<option value="https://www.cnblogs.com/Ayako/archive/2022/11/17/${item}">${item}</option>`).join('')
            $('city').value = https://www.cnblogs.com/Ayako/archive/2022/11/17/city
            // 區資料
            const areaAll = await axios.get(`api/area?pname=${province}&cname=${city}`)
            $('area').innerHTML += areaAll.data.data.map(item => `<option value="https://www.cnblogs.com/Ayako/archive/2022/11/17/${item}">${item}</option>`).join('')
            $('area').value = https://www.cnblogs.com/Ayako/archive/2022/11/17/area

        }
        // 呼叫回填方法
        getInfo()

        // 省資料下拉框
        $('province').addEventListener('change', async () => {
            // 獲取省下市資料
            const cityAll = await axios.get('api/city?pname=' + $('province').value)
            // 渲染市資料
            $('city').innerHTML = cityAll.data.data.map(item => `<option value="https://www.cnblogs.com/Ayako/archive/2022/11/17/${item}">${item}</option>`).join('')
            // 獲取市下區資料
            const areaAll = await axios.get(`api/area?pname=${$('province').value}&cname=${$('city').value}`)
            // 渲染區資料
            $('area').innerHTML = areaAll.data.data.map(item => `<option value="https://www.cnblogs.com/Ayako/archive/2022/11/17/${item}">${item}</option>`).join('')
        })

        $('city').addEventListener('change', async () => {
            const areaAll = await axios.get(`api/area?pname=${$('province').value}&cname=${$('city').value}`)
            $('area').innerHTML = areaAll.data.data.map(item => `<option value="https://www.cnblogs.com/Ayako/archive/2022/11/17/${item}">${item}</option>`).join('')
        })

        // 圖片上傳功能
        $('upload').addEventListener('change',(e)=>{
            // 非空判斷
            if(e.target.files.length===0){
                return
            }
            // 創建FormData接收
            const fd = new FormData()
            // 將圖片資料添加到fd中
            fd.append('avatar', e.target.files[0])
            // 圖片上傳介面
            axios.post('api/file',fd).then(res=>{
                console.log(res);
                $('avatar').src = https://www.cnblogs.com/Ayako/archive/2022/11/17/res.data.data.url
                //  給頭像框input進行賦值，方便拿取資料
                $('avatarInp').value = https://www.cnblogs.com/Ayako/archive/2022/11/17/res.data.data.url
            })
        })
        // 圖片點擊事件
        $('avatar').addEventListener('click',()=>{
            // 優化圖片上傳功能
            $('upload').click()
        })
      
        // 上傳點擊事件
        $('uploadAll').addEventListener('click', async (e)=>{
            // 取消默認重繪操作
            e.preventDefault()
            // 用serialize獲取表單中所有內容(前面給頭像框input賦值的應用)
            const userFormall = serialize($('userForm'),{hash:true})
            try {
                // 執行成功,上傳資料并彈出ok彈框
                await axios.put('api/settings',userFormall)
                alert('ok')
            } catch (error) {
                alert('error')
            }
        })
    </script>
</body>

</html>

本文來自博客園，作者：三井綾子，轉載請注明原文鏈接：https://www.cnblogs.com/Ayako/p/16900651.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/536243.html

標籤：其他

上一篇：瀏覽器擴展開發系列教程（一）

下一篇：瀏覽器擴展開發系列教程（一）