Vuejs 共通用ajax请求例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
    // --- 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);
                                }
                            }
                        }
                    });
                }
            }
        }
    });