Effettuare richieste AJAX con Vue.js

Mattepuffo's logo
Effettuare richieste AJAX con Vue.js

Effettuare richieste AJAX con Vue.js

Programmazione, Javascript - AJAX

Specifichiamo cha parliamo della versione di 2 di Vue.js.

Lo sto cominciando a vedere adesso, quindi non so quante differenze ci siano con la versione 1.

Comunque, vediamo come effettuare richieste AJAX e di conseguenza riepire una tabella.

Cominciamo con Javascript:

let remoteUrl = 'YOUR_URL';

var app = new Vue({
    el: '#app',
    data: {
        items: []
    },
    created: function () {
        this.getFilms();
    },
    methods: {
        getFilms: function () {
            this.$http.get(remoteUrl).then(response => {
                this.items = response.body;
            }, response => {
                alert(response);
            });
        }
    }
});

Il modulo $http fa parte della libreria vue-resource.

Mi hanno vivamente scongiliato di usare jQuery in questo caso; ed in effetti con jQuery non mi funzionava (potete guardare la mia richiesta su Stack Overflow).

Il nostro file HTML sarà così:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>MP Films</title>
    </head>
    <body>
        <div id="app">
            <table>
                <thead>
                    <tr>
                        <th>NOME</th>
                        <th>DATA</th>
                        <th>DIMENSIONE</th>
                        <th>TIPO</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in items">
                        <td>{{item.nome}}</td>
                        <td>{{item.data}}</td>
                        <td>{{item.size}}</td>
                        <td>{{item.ext}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script src="https://unpkg.com/vue"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
        <script src="script.js"></script>
    </body>
</html>

Il file remoto, fatto in PHP:

<?php

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET");

include_once './GestioneFile.php';

$gf = new GestioneFile();
$dirVolume1 = '/media/nas_film/Volume_1';
$files = $gf->getFiles($dirVolume1);
echo json_encode($files);

Senza entrare troppo nel dettaglio, fa lo scan di una cartella e manda in output il risultato in formato JSON.

Ma non fa differenza il linguaggio che usate lato server.

Enjoy!

Condividi

Commentami!