Documents

Vue.jsからAjaxでPOSTする基本


vue.jsからのajaxだったらaxiosを使うのがいちばん簡単かと思います。プロミスとか使わない最も基本的な方法を説明します。vueとaxiosはあらかじめ使えるようにしておいてください。

axiosの基本的な使い方

例によって#appというアプリを作成します。

<div id="app" class="app">
  <button @click="run()" type="button" class="btn btn-secondary">Go</button>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      text: 'hoge',
    },
    methods: {
      run:function(){
        alert(this.text);
      }
    },
  });
</script>

ボタンをクリックしたらrunというメソッドが起動するようにしています。メソッドでは定義したtextというデータがセットされてalert()が起動します。単純な仕掛けです。
これを基盤にボタンを押したらAjaxで値をPSOTできるような仕組みを作ります。

<div id="app" class="app">
  <button @click="run()" type="button" class="btn btn-secondary">Go</button>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      text: 'foobar',
    },
    methods: {
      run:function(){
        let data = new FormData();
        data.append('text', this.text);
        axios.post('/tools/serialized', data).then(response => {
          console.log(response.status);
          console.log(response.data);
        }).catch(error => {
          console.log(error.response.status);
        });
      }
    },
  });
</script>

runが実行されると、まず最初にFormData()でform送信用のオブジェクトを作ります。いわゆるhtmlタグの<form></form>内に収められているデータを取得するオブジェクトです。今回はinputとかがないのでappndしてあげます。
それからaxiosで送信します。構文は概ねこうなってます。

axios.post('/PATH/', data).then(response => {
  console.log(response.status);
  console.log(response.data);
}).catch(error => {
  console.log(error.response.status);
});

正常系はresponseのアロー関数内で、エラーはerrorのアロー関数内で処理します。正常系ではresponseオブジェクトにごっそりとデータが返ってきます。エラー系ではerrorオブジェクトで返されます。上記の例では200ステータスと送信したテキストのfoobarが返ります。

Formデータを送信する

name='text'のかわりにv-model="text"を設定するとform内の内容を送信してくれます。

<div id="app" class="app">
  <textarea class="form-text" name="text" v-model="text"></textarea>
  <button @click="run()" type="button" class="mt10 btn-sm btn btn-secondary">Go</button>
</div>

こういう感じです。vue内で設定している変数は後から入力したものを代入するので空にしておきます。

...
data: {
  text: null,
},
...

こんな感じでform内のパーツの入力値をvueが受け取れるようになります。
もっとも基本的な骨子はこんな感じになります。

<div id="app" class="app">
  <textarea class="form-text" name="text" v-model="text"></textarea>
  <button @click="run()" type="button" class="mt10 btn-sm btn btn-secondary">Go</button>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      text: null,
    },
    methods: {
      run:function(){
        let data = new FormData();
        data.append('text', this.text);
        axios.post('/PATH/', data).then(response => {
          console.log(response.status);
          console.log(response.data);
        }).catch(error => {
          console.log(error.response.status);
        });
      }
    },
  });
</script>

Laravelのコントローラ側ではこんな感じでPOSTをうけます。

<?php

namespace App\Http\Controllers\Member;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class IconController extends Controller
{
    public function ajax_post(Request $request)
    {
        return $request;
    }
}

ルーティングはこんな感じ。

Route::post('/PATH/', [App\Http\Controllers\FoobarController::class, 'ajax_post'])->name('ajax_post');

419のエラーが返って来る場合は、csrfトークンが書かれていなのかもしれないです。bladeのmeta部分に追記します。

<meta name="csrf-token" content="{{ csrf_token() }}">

これで大丈夫だと思います。



2022.05.03