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!




Share

Commentami!

About Mattepuffo.com

Blog dedicato all'informatica e alla programmazione!
Tutti i contenuti di questo blog, tranne casi particolari, sono sotto licenza Licenza Creative Commons Creative Commons Attribution-Noncommercial-Share Alike 2.5. .

2576 articoli
310 commenti
19 progetti
Altri link
  • About
  • Scrivimi
  • Copyright
  • Sitemap
  • matteo.ferrone@yahoo.it
  • GitHub
  • Privacy Policy