Loading ...

Inviare richietse POST con Vue.js

Inviare richietse POST con Vue.js

In questo articolo abbiamo visto come validare un form con Vue.js.

Partendo da quell'esempio, adesso vediamo come inviare richieste POST.

Vi ricordo che per inviare richieste HTTP, avete bisogno di un plugin in più:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

Detto ciò, questa la mia pagina completa:

<div id="nota">
    <div class="off-canvas-content" data-off-canvas-content>
        <br>
        <div v-if="errors.length" class="callout alert">
            <b>Si sono verificati degli errori:</b>
            <ul class="no-bullet">
                <li v-for="error in errors">{{ error }}</li>
            </ul>
        </div>
        <div class="row">
            <div class="small-12 columns">
                <label>Titolo
                    <input type="text" name="titolo" id="titolo" v-model="titolo">
                </label>
            </div>
        </div>
        <div class="row">
            <div class="small-12 columns">
                <label>Grupppo
                    <input type="text" name="gruppo" id="gruppo" v-model="gruppo">
                </label>
            </div>
        </div>
        <div class="row">
            <div class="small-12 columns">
                <label>
                    Testo
                    <textarea name="testo" id="testo" v-model="testo"></textarea>
                </label>
            </div>
        </div>
        <button type="button" class="button success" v-on:click="addNota">Salva</button>
    </div>
</div>
<script>
    Vue.http.options.emulateJSON = true;
    new Vue({
        el: '#nota',
        data: {
            errors: [],
            titolo: null,
            testo: null,
            gruppo: null
        },
        methods: {
            addNota: function (event) {
                if (this.titolo && this.testo && this.gruppo) {
                    this.errors = [];
                    $loading.foundation('open');
                    this.$http.post('file.php', 
                      {tit: this.titolo, txt: this.testo, gr: this.gruppo})
                            .then(response => {
                                console.log(response.body);
                                $loading.foundation('close');
                            }, response => {
                                $loading.foundation('close');
                                alert(response);
                            });
                    return true;
                }

                this.errors = [];
                if (!this.titolo) {
                    this.errors.push('Titolo obbligatorio');
                }
                if (!this.gruppo) {
                    this.errors.push('Gruppo obbligatorio');
                }
                if (!this.testo) {
                    this.errors.push('Testo obbligatorio');
                }

                event.preventDefault();
            }
        }
    });
</script>

Notate questa riga:

Vue.http.options.emulateJSON = true;

Senza di questa riiuscivo ad inviare richieste GET ma non POST.

Sto ancora indagando sul perchè, ma senza quella riga, al web service arrivava un POST vuoto.

Enjoy!