vue在使用ajax获取数据时,两种方法(jquery和vue_resource)

Posted ZHANGKAIXUAN

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue在使用ajax获取数据时,两种方法(jquery和vue_resource)相关的知识,希望对你有一定的参考价值。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    @*支持ajax版本1.1.0以下的版本*@
    <script src="http://cdn.bootcss.com/vue-resource/1.1.0/vue-resource.min.js"></script>
</head>
<body>
    <div id="app">
        <table>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>班级</td>
            </tr>
            <tr v-for="item in Students">
                <td>{{item.ID}}</td>
                <td>{{item.Name}}</td>
                <td>{{item.Cls}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

<script> 
    var app = new Vue({
        el: "#app",
        data: {        
            Students:""
        },

   //第一种:jquery ajax
        //beforeCreate: function () {
        //    var url = "/Home/Vue_Data";
        //    var _self = this;
        //    $.get(url, function (data) {
        //        _self.Students = JSON.parse(data);
        //    })
        //}

  //第二种:vue_resource
        created:function(){
            var _self = this;

    var url="/Home/Vue_Data";           
            _self.$http.get(url).then(function (data) {
                var json = data.body;              
                _self.Students = JSON.parse(json);
            });           
        }
    });
</script>





















































以上是关于vue在使用ajax获取数据时,两种方法(jquery和vue_resource)的主要内容,如果未能解决你的问题,请参考以下文章

两种Ajax方法

vue项目中使用axios发送ajax

vue-resource:在拦截 ajax 错误时捕获“未捕获(在承诺中)”

怎么获取AJAX前台返回JSON 数据

vue ajax获取数据的时候,如何保证传递参数的

前端关于jquery一些总结