AJAX---個人信息案例

来源:https://www.cnblogs.com/Ayako/archive/2022/11/17/16900651.html
-Advertisement-
Play Games

案例分析: 如圖所示,頁面載入時有數據回填,同時實現select表單同步和圖片上傳,保存後上傳至伺服器等功能 HTML模板: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA ...


案例分析:

如圖所示,頁面載入時有數據回填,同時實現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 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://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="./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 = nickname
        // 頭像地址
        $('avatar').src = avatar
        // 給頭像框input進行賦值,方便後期拿取數據
        $('avatarInp').value = avatar
        // 省數據
        const provinceAll = await axios.get('api/province')
        $('province').innerHTML += provinceAll.data.data.map(item => `<option value="${item}">${item}</option>`).join('')
        $('province').value = province
        // 市數據
        const cityAll = await axios.get('api/city?pname=' + province)
        $('city').innerHTML += cityAll.data.data.map(item => `<option value="${item}">${item}</option>`).join('')
        $('city').value = city
        // 區數據
        const areaAll = await axios.get(`api/area?pname=${province}&cname=${city}`)
        $('area').innerHTML += areaAll.data.data.map(item => `<option value="${item}">${item}</option>`).join('')
        $('area').value = 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="${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="${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="${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 = res.data.data.url
            //  給頭像框input進行賦值,方便拿取數據
            $('avatarInp').value = 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 class="container">
        <h1 class="p-5">個人設置</h1>
        <form class="col-6" id="userForm">
            <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" id="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" id="province">
                        <option value="">--省--</option>
                    </select>
                    <select class="form-select col-4" name="city" id="city">
                        <option value="">--市--</option>
                    </select>
                    <select class="form-select col-4" name="area" id="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" id="avatarInp" />
                    <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="..." id="avatar" />
                        <figcaption class="figure-caption" id="load">修改頭像</figcaption>
                    </figure>
                </div>
            </div>
            <div class="row mb-3">
                <label class="col-3"></label>
                <div class="col-9">
                    <button class="btn btn-primary"   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="./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 = nickname
            // 頭像地址
            $('avatar').src = avatar
            // 給頭像框input進行賦值,方便後期拿取數據
            $('avatarInp').value = avatar
            // 省數據
            const provinceAll = await axios.get('api/province')
            $('province').innerHTML += provinceAll.data.data.map(item => `<option value="${item}">${item}</option>`).join('')
            $('province').value = province
            // 市數據
            const cityAll = await axios.get('api/city?pname=' + province)
            $('city').innerHTML += cityAll.data.data.map(item => `<option value="${item}">${item}</option>`).join('')
            $('city').value = city
            // 區數據
            const areaAll = await axios.get(`api/area?pname=${province}&cname=${city}`)
            $('area').innerHTML += areaAll.data.data.map(item => `<option value="${item}">${item}</option>`).join('')
            $('area').value = 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="${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="${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="${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 = res.data.data.url
                //  給頭像框input進行賦值,方便拿取數據
                $('avatarInp').value = 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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一 演算法複雜度 演算法複雜度分為時間複雜度和空間複雜度。時間複雜度是指執行演算法所需要的計算工作量;而空間複雜度是指執行這個演算法所需要的記憶體空間。 演算法的複雜性體運行該演算法時的電腦所需資源的多少,電腦資源最重要的是時間和空間(即寄存器)資源,因此複雜度分為時間和空間複雜度。 二 時間複雜度 2.1 ...
  • 摘要 在Prism中彈出一個對話框,預設是一個Windows預設樣式的視窗,會與自己所開發的項目完全不搭配,例如下麵這樣子 如果為了迎合軟體主體風格,可以做出類似這樣效果 其實原理也很簡單,Prism也考慮到了這一點,所以特意設計一個供用戶自定義的介面 編寫組件樣式 1、新建一個Window視圖 註 ...
  • 大家都用過Linux中的應用程式安裝工具,如yum、apt、rpm等工具進行安裝自己想要的一些工具或則軟體之類的,當然Linux操作系統還是很強大的有很多類似的命令來安裝我們所需要的程式,但是windwos有沒有類似於windows這樣的應用安裝程式呢?想必大家看標題就能看的出來肯定是有的,那就是微 ...
  • //源文件 void ADCPhyConfig() { RCC->APB2ENR |=1 <<8; //使能 ADC1 時鐘 RCC->AHB1ENR |=1 <<0; //使能 PORTA 時鐘 //PA5 輸入模式、下拉、高速 GPIOA->MODER |= (3<<5*2); //輸入模式 G ...
  • 1.打開手機,開發者選項,開啟usb調試 , 無線調試,查看手機ip 2.cmd 測試是否能ping通手機 > ping 192.168.0.102正在 Ping 192.168.0.102 具有 32 位元組的數據:來自 192.168.0.102 的回覆: 位元組=32 時間=283ms TTL=6 ...
  • UTF-8編碼的漢字:少數是漢字每個占用3個位元組,多數占用4個位元組 # GET請求編碼 Chrome會先把URL中非ASCII字元按照某種編碼格式(谷歌瀏覽器是UTF-8)編碼成byte數組後,然後轉成16進位數組,然後在每個16進位數字前加上&分割 eg: 地址欄:http://localhost ...
  • 好家伙, 頂不住了,太多的bug, 本來是想把背景用canvas做成動態的,但是,出現了各種問題 為了不耽誤進度,我們先把一個簡單的登錄註冊界面做出來 來看看效果: (看上去還不錯) 本界面使用Vue2(新建項目的時候記得把less勾上,項目里有用到) 1.項目目錄: 2.MyLogin.vue組件 ...
  • 以谷歌內核的瀏覽器擴展,包括 edge chrome ,還有我們常用的國產瀏覽器都能使用 瀏覽器擴展是一種軟體,以增強Chrome內核瀏覽器的功能。瀏覽器擴展使用HTML、JavaScript、CSS和圖片等Web技術開發。 瀏覽器擴展與瀏覽器插件不同。瀏覽器擴展無需瞭解瀏覽器的源代碼,而瀏覽器插件 ...
一周排行
    -Advertisement-
    Play Games
  • 1.部署歷史 猿友們好,作為初來實習的我,已經遭受社會的“毒打”,所以請容許我在下麵環節適當吐槽,3Q! 傳統部署 ​ 回顧以往在伺服器部署webapi項目(非獨立發佈),dotnet環境、守護進程兩個逃都逃不掉,正常情況下還得來個nginx代理。不僅僅這仨,可能牽扯到yum或npm。node等都要 ...
  • 隨著技術的進步,跨平臺開發已經成為了標配,在此大背景下,ASP.NET Core也應運而生。本文主要基於ASP.NET Core+Element+Sql Server開發一個校園圖書管理系統為例,簡述基於MVC三層架構開發的常見知識點,前一篇文章,已經簡單介紹瞭如何搭建開發框架,和登錄功能實現,本篇... ...
  • 這道題只要會自定義cmp恰當地進行排序,其他部分沒有什麼大問題。 上代碼: 1 #include<bits/stdc++.h> 2 using namespace std; 3 int n,s,h1,h2,cnt; 4 struct apple{ 5 int height,ns;//height為蘋 ...
  • 這篇文章主要描述RPC的路由策略,包括為什麼需要請求隔離,為什麼不在註冊中心中實現請求隔離以及不同粒度的路由策略。 ...
  • 簡介: 中介者模式,屬於行為型的設計模式。用一個中介對象來封裝一系列的對象交互。中介者是各對象不需要顯式地相互引用,從而使其耦合鬆散,而且可以獨立地改變他們之間的交互。 適用場景: 如果平行對象間的依賴複雜,可以使用中介者解耦。 優點: 符合迪米特法則,減少成員間的依賴。 缺點: 不適用於系統出現對 ...
  • 【前置內容】Spring 學習筆記全系列傳送門: Spring學習筆記 - 第一章 - IoC(控制反轉)、IoC容器、Bean的實例化與生命周期、DI(依賴註入) Spring學習筆記 - 第二章 - 註解開發、配置管理第三方Bean、註解管理第三方Bean、Spring 整合 MyBatis 和 ...
  • 簡介: 享元模式,屬於結構型的設計模式。運用共用技術有效地支持大量細粒度的對象。 適用場景: 具有相同抽象但是細節不同的場景中。 優點: 把公共的部分分離為抽象,細節依賴於抽象,符合依賴倒轉原則。 缺點: 增加複雜性。 代碼: //用戶類 class User { private $name; fu ...
  • 這次設計一個通用的多位元組SPI介面模塊,特點如下: 可以設置為1-128位元組的SPI通信模塊 可以修改CPOL、CPHA來進行不同的通信模式 可以設置輸出的時鐘 狀態轉移圖和思路與多位元組串口發送模塊一樣,這裡就不給出了,具體可看該隨筆。 一、模塊代碼 1、需要的模塊 通用8位SPI介面模塊 `tim ...
  • AOP-03 7.AOP-切入表達式 7.1切入表達式的具體使用 1.切入表達式的作用: 通過表達式的方式定義一個或多個具體的連接點。 2.語法細節: (1)切入表達式的語法格式: execution([許可權修飾符] [返回值類型] [簡單類名/全類名] [方法名]([參數列表]) 若目標類、介面與 ...
  • 測試一、虛繼承與繼承的區別 1.1 單個繼承,不帶虛函數 1>class B size(8): 1> + 1> 0 | + (base class A) 1> 0 | | _ia //4B 1> | + 1> 4 | _ib //4B 有兩個int類型數據成員,占8B,基類邏輯存在前面 1.2、單個 ...