Axios-入门

介绍

Axios对原生Ajax进行了封装,简化书写,快速开发

官网:Axios中文文档 | Axios中文网 (axios-http.cn)

入门

1引入Axios的js文件

javascript 复制代码
 <script src="js/axios.js"></script>

2使用Axios发送请求,并获取响应结果

javascript 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTE-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=l.0">
    <title>Ajax</title>
    <script src="js/axios.js"></script>
</head>

<body>
    <input type="button" value="获取数据Get" onclick="get()">
    <input type="button" value="获取数据Post" onclick="post()">

</body>
<script>
    function get(){
         axios({ mehod:"get",
           url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
      }).then(result=>{
         console.log(result);
      })
    }
    function post(){
         axios({ mehod:"post",
          url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
          data:"id=1;"
        }).then(result=>{
            console.log(result);
        })
    }
   
</script>

</html>

axios({....对象信息....mehod,url(data)}).then(result)=>{}

then后面接一个result的自定义函数

post有个而外的data

请求方式别名

改写

javascript 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTE-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=l.0">
    <title>Ajax</title>
    <script src="js/axios.js"></script>
</head>

<body>
    <input type="button" value="获取数据Get" onclick="get()">
    <input type="button" value="获取数据Post" onclick="post()">

</body>
<script>
    // function get(){
    //      axios({ mehod:"get",
    //        url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
    //   }).then(result=>{
    //      console.log(result);
    //   })
    // }

    axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{console.log(result);})



    // function post(){
    //      axios({ mehod:"post",
    //       url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
    //       data:"id=1;"
    //     }).then(result=>{
    //         console.log(result);
    //     })
    //}

    axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById", "id=1").then(result=>{console.log(result);})


</script>

</html>

案例:网页加载完成,调用vue生命周期的mounted()向服务器发送请求返回数据赋值遍历渲染表格

数据

代码

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTE-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=l.0"><title>Vue-快速入门</title>
<script src="js/vue.js"></script></head>
<script src="js/axios.js"></script>
<body>
<div id ="app">
    <table border="1"cellspacing="0" width="60%">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>图像</th>
            <th>性别</th>
            <th>职位</th>
            <th>入职时间</th>
            <th>最后操作时间</th>
        </tr>
        <tr v-for="(emp,index) in emps" align="center">
            <th>{{index+1}}</th>
            <th>{{emp.name}}</th>
            <th>
                <img : src="emp.image" width="70px" height="50px">
            </th>
            <th v-if="emp.gender=1">男</th>
            <th v-else>女</th>
            <th>{{emp.jop}}</th>
            <th>{{emp.entrydate}}</th>
            <th>{{emp.updatetime}}</th>
        </tr>
    </table>
</div>
</body>
<script>
//定义vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
            emps:[]
        },
        methods:{

        },
        mounted(){
            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{
                this.emps=result.data.data;
                
            })
        }
    })
</script>
</html>
相关推荐
Run Freely9373 天前
Ajax-day2(图书管理)-弹框显示和隐藏
前端·javascript·ajax
xkroy4 天前
ajax
前端·javascript·ajax
元亓亓亓4 天前
JavaWeb--day3--Ajax&Element&路由&打包部署
android·ajax·okhttp
Yvonne爱编码4 天前
AJAX入门-URL、参数查询、案例查询
前端·javascript·ajax
lwprain5 天前
龙蜥8.10中spark各种集群及单机模式的搭建spark3.5.6(基于hadoop3.3.6集群)
大数据·ajax·spark
知识分享小能手5 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
Yvonne爱编码6 天前
构建高效协作的桥梁:前后端衔接实践与接口文档规范详解
前端·git·ajax·webpack·node.js
William_cl6 天前
MVC 中 AJAX 与前后端交互深度实战(含独家避坑与场景化方案)
ajax·mvc·交互
Yvonne爱编码7 天前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
闯闯桑7 天前
Spark 中spark.implicits._ 中的 toDF和DataFrame 类本身的 toDF 方法
大数据·ajax·spark·scala