zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    ibatis中isEquals、isNotEmpty的用法
    truncate与delete 、drop的区别
    javaweb学习总结二十二(servlet开发中常见的问题汇总)
    ORACLE时间函数(SYSDATE)深入理解
    大数据
    javaweb学习总结二十一(servlet开发入门、servlet生命周期以及调用过程)
    javaweb学习总结二十(http响应)
    javaweb学习总结十九(http协议概述以及http请求信息分析)
    Telnet客户端连接服务器,看不见字符,只显示横线
    Eclipse打JAR包的使用
  • 原文地址:https://www.cnblogs.com/ZHANGKAIXUAN/p/6790185.html
Copyright © 2011-2022 走看看