• [JavaScript][AJAX] axios框架 ,页面跳转传参,DOM驱动,数据驱动渲染页面,tab切换,网络请求loading动画

    目录

    axios框架

    axios基本语法

    axios推荐使用方式

    axios注意点:

     js中分号作用

    页面跳转传参

    DOM驱动渲染页面

    数据驱动渲染页面

    tab切换

    网络请求loading动画

    axios框架

    Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

    axios基本语法

          axios基本语法

         1.基本语法 : axios.get('url' ) .then( res=>{} ).catch( err=>{} )

          1.1 get请求: axios.get（'url , {params:{ 属性名:属性值 }}). then(res=>{})

          1.2 post请求: axios.post（'url'， { 属性名:属性值 } ). then( res=> {} )

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    8.   <title>Document</title>
    9.   <style>
    10.     .box {
    11.       height: 200px;
    12.       width: 800px;
    13.       font-size: 20px;
    14.       font-weight: 700;
    15.       margin: 20px auto;
    16.     }
    17.   </style>
    18. </head>
    19.  
    20. <body>
    21.   <button class="btn1">基本使用</button>
    22.   <button class="btn2">点我发送get请求</button>
    23.   <button class="btn3">点我发送post请求</button>
    24.   <div class="box"></div>
    25.   <!-- 引入 -->
    26.   <script src="./axios.js"></script>
    27.   <script>
    28.     /*
    29.       axios基本语法
    30.      1.基本语法 : axios.get('url' ) .then( res=>{} ).catch( err=>{} )
    31.       1.1 get请求: axios.get（'url , {params:{ 属性名:属性值 }}). then(res=>{})
    32.       1.2 post请求: axios.post（'url'， { 属性名:属性值 } ). then( res=> {} )
    34.       3.axios注意点:res对象并不是服务器响应的原始数据,而是axios自己额外包的数据
    35. res.config：请求配置
    36. res.data：服务器真正响应的数据
    39. */
    40.     document.querySelector('.btn1').addEventListener('click', function () {
    41.       axios.get('https://autumnfish.cn/api/joke/list?num=10')
    42.         // .then代替onload
    43.         .then(res => console.log(res))
    44.         .catch(err => console.log(err))
    45.     })
    46.     document.querySelector('.btn2').addEventListener('click', function () {
    47.       axios.get('https://autumnfish.cn/api/joke/list', {
    48.         // 参数
    49.         params: { num: 10 }
    50.       }).then(res => {
    51.         console.log(res);
    52.         document.querySelector('.box').innerHTML = res.data.data
    53.       })
    54.     })
    55.     document.querySelector('.btn3').addEventListener('click', function () {
    56.       axios.post('http://ajax-base-api-t.itheima.net/api/login', { username: 'admin', password: '123456' }).then(res => {
    57.         console.log(res)
    58.         alert(res.data.msg)
    59.       })
    60.     })
    61.

    axios推荐使用方式

    💎推荐语法:

        axios({

          method:'请求方法',

          url:'请求路径',

          params:{get参数},

          data:{post参数}

        })

    💎注意:params传get方法参数,data传post参数,不要错用,错用无效

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    8.   <title>Document</title>
    9.   <style>
    10.     .box {
    11.       height: 200px;
    12.       width: 800px;
    13.       font-size: 20px;
    14.       font-weight: 700;
    15.       margin: 20px auto;
    16.     }
    17.   </style>
    18. </head>
    19.  
    20. <body>
    21.   <button class="btn1">基本使用</button>
    22.   <button class="btn2">点我发送get请求</button>
    23.   <button class="btn3">点我发送post请求</button>
    24.   <div class="box"></div>
    25.   <!-- 引入 -->
    26.   <script src="./axios.js"></script>
    27.   <script>
    28.  
    29.     document.querySelector('.btn1').addEventListener('click', function () {
    30.  
    31.       axios({
    32.         url: 'https://autumnfish.cn/api/joke/list',
    33.         method: 'get',
    34.         params: { num: 10 },
    35.       }).then(res => console.log(res))
    36.     })
    37.  
    38.     document.querySelector('.btn3').addEventListener('click', function () {
    39.  
    40.  
    41.       axios({
    42.         url: 'http://ajax-base-api-t.itheima.net/api/login',
    43.         method: 'post',
    44.         data: { username: 'admin', password: '123456' }
    45.       }).then(res => {
    46.         console.log(res);
    47.         alert(res.data.msg)
    48.         location.href = 'https://blog.csdn.net/wusandaofwy?spm=1000.2115.3001.5343'
    49.       })
    50.     })
    51.   </script>
    52. </body>
    53.  
    54. </html>

    axios注意点:

    res对象并不是服务器响应的原始数据,而是axios自己额外包的数据

    res.config：请求配置

    res.data：服务器真正响应的数据

     js中分号作用

        // js中分号作用:语句结束符

            // 如果不加分号,js会往下嗅探

            let res = 1 +

                123

            console.log(res);//124

            💎 自调用函数(立即执行函数)前一定要加分号

            ; (function () {

                console.log('222')

            })()

            💎数组前一定要加分号

            ;[1,2,3,4].join('')

    🏆否则都会报错

    页面跳转传参

    需求:在index页,点击查看详情使用url实现页面跳转传参

    实现:

    1.在index页给button增加onclick事件挑转到detail页,同时传参数过去

    2.在detail页对传入参数处理获取id

     // 🏆 通过对location.search获取参数信息,是一个字符串,对字符串用=进行分割成一个数组,获取数组下标为1的元素就是传过来的id

        let id = location.search.split('=')[1]

    3.得到id后通过axios请求数据

    1.  axios({
    2.       url: `https://autumnfish.cn/fruitApi/fruit/${id}`,
    3.       method: 'get',
    4.     }).then(res => {
    5.       const { data: { data } } = res
    6.       console.log(data);
    7.       render(data)
    8.     })

    DOM驱动渲染页面

    DOM驱动渲染页面是通过document.createElement()创建子元素,然后把子元素插入父元素

    父元素.appendChild(子元素)(或者insertBefore(子元素,插入某某元素前))

    1.       let newLi = document.createElement('li')
    2.       newLi.className = 'right_word'
    3.       newLi.innerHTML = `<img src="img/person02.png" />
    4. 					<span>${text.value}</span>`
    5.       list.appendChild(newLi)

    数据驱动渲染页面

    数据驱动渲染页面;

    1.声明一个全局数组存贮变量

    2,把数据增加进数组(push(),unshift())

    3.通过数据的map()和join()方法配合使用,渲染界面

    父元素.innerHtml=数组.map(item=>`返回的新数组元素`).join('')

    1.  <script>
    2.     /* 
    3.       使用数据驱动思路
    4.           1.声明一个全局数组存储聊天内容
    5.           2.点击发送
    6.               2.1 非空判断
    7.               2.2 将自己的聊天内容添加到数组中
    8.               2.3 ajax发送请求,获取机器人回复内容添加到数组中
    9.               2.4 文本清空
    10.       */
    12.     let arr = []
    13.     // 文本框
    14.     const text = document.querySelector('.input_txt')
    15.     // 按钮对象
    16.     const sub = document.querySelector('.input_sub')
    17.  
    18.     sub.addEventListener('click', function () {
    19.       if (!text.value) {
    20.         text.value = ''
    21.         return alert('输入内容不能为空!!!!')
    22.       }
    23.       // 自己写的内容录入数组
    24.       arr.push({
    25.         text: text.value,
    26.         isMe: true
    27.       })
    28.       console.log(arr);
    29.       // 2.4 文本清空
    30.       text.value = ''
    31.       render(arr)
    32.       // 请求机器人
    33.       axios({
    34.         url: 'http://ajax-base-api-t.itheima.net/api/robot',
    35.         method: 'get',
    36.         params: { spoken: text }
    37.       }).then(({ data: { data: { info } } }) => {
    38.         //成功回调
    39.         const txt = info.text
    40.         console.log(txt)
    41.         // 机器人回应文字放入数组
    42.         arr.push({
    43.           text: txt,
    44.           isMe: false,
    45.         })
    46.         console.log(arr)
    47.         render(arr)
    48.       })
    49.  
    50.     })
    51.  
    52.  
    53.     // 封装渲染函数
    54.     function render(data) {
    55.       document.querySelector('.talk_list').innerHTML = data
    56.         .map(item => item.isMe ? `
    57.            <li class="right_word">
    58.             <img src="img/person02.png" />
    59.             <span>${item.text}</span>
    60.           </li> 
    61.           `: `
    62.       <li class="left_word">
    63.             <img src="img/person01.png" />
    64.             <span>${item.text}</span>
    65.           </li> 
    66.           `)
    67.         .join('')
    68.       resetui()
    69.     }
    70.  
    71.     
    72.   </script>

    tab切换

            // 去除active

            document.querySelector('.nav ul li.active').classList.remove('active')

            // 增加active

            item.classList.add('active')

    网络请求loading动画

     🏆网络请求loading动画思路

          原理： gif动图

          显示： ajax发送请求之前

          隐藏:  ajax响应之后

    1.       // 💎显示loading动图
    2.       document.querySelector('.cover').style.display = ' block'
    3.       axios({
    4.         url: 'https://autumnfish.cn/api/cq/category',
    5.         method: 'get',
    6.         params: { type }
    7.       }).then(res => {
    8.         //成功回调
    9.         // 💎隐藏loading动图
    10.         document.querySelector('.cover').style.display = ' none'             
    11.         renderData(res.data.data.heros)
    12.       })

  • 相关阅读:
    GET 和 POST 到底有什么区别？
    MySQL——锁
    .360勒索病毒和.halo勒索病毒数据恢复|金蝶、用友、ERP等数据恢复
    干货︱部分领域数字孪生白皮书及报告汇总（附下载）
    JavaScript学习笔记(一）
    你以为Shell只是命令行？读懂这篇文，给你的工作赋能
    open-webui与ollama的部署最后完整之命令
    Linux 利用 /proc 目录恢复误删除的文件
    yum、apt-get、curl、wget和pip的使用范围
    服务器连接校园网
  • 原文地址：https://blog.csdn.net/wusandaofwy/article/details/126531230