vue中ajax请求发送

Posted 2023-01-01 bigox

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中ajax请求发送相关的知识，希望对你有一定的参考价值。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        span.active
            color:red;
        
    </style>
</head>

<body>
<div id="app">
    <div>
        <span @click="handlerClick(index)" v-for = "(category,index) in categoryList" :key="category.id" :class="active:index==currentIndex">
                                                                                <!--绑定属性-->
             category.name 
        </span>

    </div>

</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src='./vue.js'></script>
<script>
    let vm = new Vue(   // 声明变量  实例化一个对象vm(指的是vue的实例)
        el: "#app",    //绑定根元素
        //数据属性
        data()  //这里有obsever
            //返回的数据跟后端数据库里的有关,如果是动态的数据,存的是数据结构
            return categoryList:[],currentIndex:0
        ,
        methods:
            handlerClick(i)this.currentIndex=i;
        ,
        created()
            $.ajax(
                //请求后端数据 ****
                url:"https://www.luffycity.com/api/v1/course_sub/category/list/",
                type:"get",
                // success:function(data)
                //后端数据渲染回来
                success:(data)=>       //data 一般是从后端返回给前端的
                    console.log(data);

                    //Object
                        //data:(6) […, …, …, …, …, …, __ob__: Observer]
                        //error_no:0
                        //proto__:Object

                    if (data.error_no === 0)
                        var data=data.data;
                        let obj=
                            id:0,
                            name:"全部",
                            category:"0"
                        
                        this.categoryList = data;
                        this.categoryList.unshift(obj)
                        //把data赋值给categoryList
                        console.log(this)//拿到的是一个ajax对象,
                        // 所以把上面的匿名函数改成箭头函数

                        //改成箭头函数之后得到的是vue对象
                        this.categoryList=data;
                    
            ,

                error:function(err)
                    console.log(err);
                
            )
        
    )
</script>


</body>
</html>

以上是关于vue中ajax请求发送的主要内容，如果未能解决你的问题，请参考以下文章

vue中使用vue-resource发送ajax请求

Vue--axios：vue中的ajax异步请求（发送和请求数据）