Vuejs 共通用ajax请求例子

98 阅读 0 评论 65 点赞

我是靠谱客的博主无聊皮带，最近开发中收集的这篇文章主要介绍Vuejs 共通用ajax请求例子，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

    // --- AJAXデータのパス ---
    sfApp.dataPath = thisHomePath;
    // --- テーマのパス ---

    sfApp.themePath = thisHomePath + 'common/asset/css/theme/';
    // --- データテーブルの言語データ ---
    sfApp.dataTableLanguage = {
        sEmptyTable: 'テーブルにデータがありません',
        sInfo: '_START_ - _END_ 件目を表示 / _TOTAL_ 件中',
        sInfoEmpty: '0 件',
        sInfoFiltered: '（全 _MAX_ 件）',
        sInfoPostFix: '',
        sInfoThousands: ',',
        sLengthMenu: '表示件数 _MENU_ 件',
        sLoadingRecords: '読み込み中...',
        sProcessing: '処理中...',
        sSearch: 'キーワード検索',
        searchPlaceholder: '検索するキーワードを入力',
        sZeroRecords: '一致する情報がありません',
        oPaginate: {
            sFirst: '先頭へ',
            sLast: '最後へ',
            sNext: '次へ',
            sPrevious: '前へ'
        },
        oAria: {
            sSortAscending: ': 列を昇順に並べ替えるにはアクティブにする',
            sSortDescending: ': 列を降順に並べ替えるにはアクティブにする'
        }
    };


    //
    // --- Vue ---
    //

    // --- AJAX ---
    sfApp.vueAjax = Vue.extend({
        data: function() {
            return {
                path: '',
                param: {}, // POSTのパラメーター
                info: {}
            };
        },
        created: function() {
            // --- ロード ---
            this.load();
        },
        updated: function() {
            // --- 表示状態にする ---
            $(this.$el)
                .addClass('ready')
                .removeClass('not-ready');
        },
        methods: {
            // --- AJAXデータのロード ---
            load: function() {
                if (this.path) {
                    var self = this;
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        url: this.path,
                        data: this.param,
                        cache: false
                    }).done(function(data) {
                        self.info = data.data;
                        if (data.result) {
                            self.result = data.result;
                            if (self.result > 0) {
                                if (typeof self.error === 'function') {
                                    self.error(self.result);
                                }
                            }
                        }
                    });
                }
            }
        }
    });