美文网首页
vue.js使用ajax进行数据交互的方法

vue.js使用ajax进行数据交互的方法

作者: 新篇章 | 来源:发表于2018-03-05 23:30 被阅读0次

在VUE开发时,数据可以使用jquery和vue-resource来获取数据。在获取数据时,一定需要给一个数据初始值。

看下例:

var myDealRecord = new Vue({
    el: '#tanDealList',
    data: {
        tableList: []
    },
    methods: {
        lookMost: function lookMost() {
            myRecord_pageSizeNumber = myRecord_pageSizeNumber + 10;
            this.tranHistoryRecord();
        },
        tranHistoryRecord: function tranHistoryRecord() {
            var _this2 = this;
            $.ajax({
                method: "post",
                url: baseUrl + "/trade/dealDetail?",
                data: {
                    exchangeId: dataClass.exchangeId,
                    pageNum: 1,
                    pageSize: myRecord_pageSizeNumber
                },
                beforeSend: function(request) {
                    request.setRequestHeader("token", token);
                },
                success:function(data){
                    // console.log(data);
                    tranDealTotal = data.total;
                    if (tranDealTotal == 0) {
                        $('#tran_dealDl').hide();
                        $('#tran_noHave_deal').show();
                    } else if (data.code == 1) {
                        $('#tran_dealDl').show();
                        $('#tran_noHave_deal').hide();
                        $('#tranMy_DealRecord_most').show();
                        $('#tranMy_DealRecord_noMost').hide();
                        if (data.rows.length < myRecord_pageSizeNumber) {
                            $('#tranMy_DealRecord_noMost').show();
                            $('#tranMy_DealRecord_most').hide();
                        }
                        if (data.rows.length > 0) {
                            var tranCoinIndex = data.rows[0].symbol.lastIndexOf('/');
                            var tranPrice = data.rows[0].symbol.substring(tranCoinIndex + 1);
                            var tranAmount = data.rows[0].symbol.substring(0, tranCoinIndex);
                            $('#tranPrice').html(tranPrice);
                            $('#tranAmount').html(tranAmount);
                            _this2.tableList = data.rows;
                        }
                    } else {
                        console.log("我的成交记录:" + data.message);
                    }
                },
                error:function (e) {
                    console.log(e);
                }
            })
        },
        setTime: function setTime() {
            setInterval(this.tranHistoryRecord, 5000);
        }
    },
    created: function created() {
        this.setTime();
    }
});

相关文章

网友评论

      本文标题:vue.js使用ajax进行数据交互的方法

      本文链接:https://www.haomeiwen.com/subject/esikfftx.html