网页前端开发（基础进阶4--axios） - 实践

Ajax

        Ajax(异步的JavaScript和XML) 。

一种数据格式，可以用来存储复杂的数据结构。就是        XML是可扩展标记语言，本质上

        可以通过Ajax给服务器发送请求，并获取服务器响应的数据。

        Ajax采用异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想等等。

Axios

        Axios对原生的Ajax进行了封装，简化书写，快捷创建。

步骤：

        1.引入Axios的js文档

        2.使用Axios的发送请求，并获取响应结果。

使用方法：

<script src="js/axios.js"></script>

<script>

    document.querySelector('#btnGet').addEventListener('click',function(){

      //axios发起异步请求

      axios({

        method:'GET'

        url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',

      }).then((result)=>{//成功回调函数

        console.log(result)

      }).catch((error)=>{//失败回调函数

        console.log(error)

      })

    })

  })

</script>

method：请求方式，GET/POST

url：请求路径

data：请求数据（POST）

params：发送请求时携带的url参数。

        Axios的简化

axios.请求方式(url [,data[,config]])

示例

axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list')

      .then((result) => {

        console.log(result)

      }).catch((err) => {

        console.log(err)

      });

.then((result) => {

        console.log(result)

      }).catch((err) => {

        console.log(err)

      });

可以启用thenc快速生成。

具体代码：

        Tlias智能学习辅助系统            /* 导航栏样式 */        .navbar {            background-color: #b5b3b3; /* 灰色背景 */                        display: flex; /* flex弹性布局 */            justify-content: space-between; /* 左右对齐 */             padding: 10px; /* 内边距 */            align-items: center; /* 垂直居中 */        }        .navbar h1 {            margin: 0; /* 移除默认的上下外边距 */            font-weight: bold; /* 加粗 */            color: white;            /* 设置字体为楷体 */            font-family: "楷体";        }        .navbar a {            color: white; /* 链接颜色为白色 */            text-decoration: none; /* 移除下划线 */        }         /* 搜索表单样式 */        .search-form {            display: flex;            flex-wrap: nowrap;            align-items: center;            gap: 10px; /* 控件之间的间距 */            margin: 20px 0;        }        .search-form input[type="text"], .search-form select {            padding: 5px; /* 输入框内边距 */            width: 260px; /* 宽度 */        }        .search-form button {            padding: 5px 15px; /* 按钮内边距 */        }         /* 表格样式 */        table {            width: 100%;            border-collapse: collapse;        }        th, td {            border: 1px solid #ddd; /* 边框 */            padding: 8px; /* 单元格内边距 */            text-align: center; /* 左对齐 */        }        th {            background-color: #f2f2f2;            font-weight: bold;        }        .avatar {            width: 30px;            height: 30px;        }         /* 页脚样式 */        .footer {            background-color: #b5b3b3; /* 灰色背景 */            color: white; /* 白色文字 */            text-align: center; /* 居中文本 */            padding: 10px 0; /* 上下内边距 */            margin-top: 30px;        }         #container {            width: 80%; /* 宽度为80% */            margin: 0 auto; /* 水平居中 */        }                                    Tlias智能学习辅助系统            退出登录                                            姓名：                         性别：                                            男                女                         职位：                                            班主任                讲师                学工主管                教研主管                咨询师                                                                                                                           序号                    姓名                    性别                    头像                    职位                    入职日期                    最后操作时间                    操作                                                                                         {{index + 1}}                    {{e.name}}                    {{e.gender == 1?'男' : '女'}}                                                                                                          班主任                        讲师                        学工主管                        教研主管                        咨询师                        其他                                         {{e.entrydate}}                    {{e.updatetime}}                                                                                                                                                         江苏传智播客教育科技股份有限公司            版权所有 Copyright 2006-2024 All Rights Reserved                              import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'       createApp({        data() {          return {            searchForm: { //封装用户输入的查询条件                name: '',                gender: '',                job: ''            },            empList: []          }        },        //方法        methods: {            async search(){                // 发送ajax请求，获取数据                // axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then((result) => {                //     this.empList = result.data.data;                // })                // console.log('===========================');                 let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);                this.empList = result.data.data;            },            clear(){                //清空表单项数据                this.searchForm = {name:'', gender:'', job:''}                this.search()            }        },        //钩子函数        mounted(){            //页面加载完成之后，发送ajax请求，获取数据            this.search()        }      }).mount('#container')

达成了查询与清空功能。